Skip to main content


Banner are page level messages provided to the user.


There are 3 different sized varients of banners provided in GEL. Info, Preprod and Danger

Banner types


Banner demo


  • Banner should always be the first item on the page when displayed.
  • Banners are non closable in behaviour meaning they remain at the top of the page until the entirety of the frame.

When to use

  • Use banner when user would require information about the page at the top level.

When not to use

  • If you need to communicate that a feature hasn't been configured or used, consider using an empty state instead.
  • If you need to communicate status of the contents of the page, consider using an alert instead.

Designer assets

Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact GEL Community.

Developer API


Banner is a custom component specific to GEL and is not available in PrimeVue.