Skip to main content


Alert is a page level message residing at the start of the content. Also known as message in PrimeVue.


There are 4 different sized varients of alerts provided in GEL. Info, Success, Warning and Error

Alert types


Alert types


  • Alert is generally in page level with the second highest priority after banner.
  • An alert ideally sits underneath the page heading above all the content for that particular page as displayed in the demo above.
  • An alert can be used in combination with from validation to help users remedy errors.

When to use

  • Use alert to advise the user that they should be aware of, or address something related to their current context.
  • Educate the user about new or unused feature, or information related to their current context.

When not to use

  • If you are immediately confirming a user's action while they remain in the same view, use a toast instead.
  • If you are promoting, soliciting feedback, or informing a user about a feature, use a banner instead.

Designer assets

Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact Experience Design CoP.

Developer API

Hey Developers, find out the tech documentation of this compoment on PrimeVue. If you have issue, please contact Development CoP