Skip to content
search icon
clear
Component Status

Notification banner

Figma

How to add

  1. Locate the Assets tab in the Layers Panel.
  2. There are two ways to locate the Notification: Banner component needed:
    • Use the search bar to search for a component grouping name or variation name.
    • Scroll through the folders list and open the grouping.
  3. Once the component needed is located, click and drag it into the frame/artboard.

How to use

  1. Place the Notification: Banner component needed on the frame/artboard.
  2. Locate and expand the highlighted layer in the Layers Panel.
  3. Edit the text label.
  4. Select all the Notification: Banner header layers and convert them to a frame/artboard by using the following shortcut:
  • Mac: Command + Option + G
  • PC: Ctrl + ALT + G
  1. Make sure to rename the new group.
  2. Locate the Design tab in the Inspector Panel.
  3. Under the Constraints section, set up constraints.

API

Banner

PropertyTypeRequiredDefaultDescription
classNameStringfalseundefined@ignore
childrenNodetrue-@ignore

BannerMessage

PropertyTypeRequiredDefaultDescription
childrenStringtrue-Text content

BannerIcon

PropertyTypeRequiredDefaultDescription
variantEnum
'info' │ 'warning'
falseinfoWhich icon background and fill color to use. Info = green, warning = red
childrenNodetrue-@ignore

BannerActions

PropertyTypeRequiredDefaultDescription
classNameStringfalseundefined@ignore
placementEnum
'bottom' │ 'left'
falseleftPlacement of the action button/s
childrenNodetrue-@ignore
Edit this page on GitHub