Skip to main content

Alert

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

Variants​

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

Alert types

Demo​

Alert types

Guidance​

  • 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​

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

Developer API​

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