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 and choose a variant in the Inspector Panel.
2. Locate and expand the highlighted layer in the Layers Panel.
3. Edit the text label.
4. There are two ways to change the action icon:
   • Drag and drop
   • Search or locate an icon in the Assets Panel
   • Drag and drop the icon directly into the placeholder icon using:
   • Mac: Command + Option
   • PC: Ctrl + ALT
   • Manually
   • Locate and select the Icon > Nested icon > Placeholder Icon or Icon > Nested icon > chevron down layer in the Layers Panel.
   • Locate the Design tab in the Inspector Panel.
   • Under the Instance section, click the icon name to expand the menu.
   • Choose a new icon.
5. 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

Looking for the API table of available props? We got you covered in the Storybook 👏

BannerMessage

Looking for the API table of available props? We got you covered in the Storybook 👏

BannerIcon

Looking for the API table of available props? We got you covered in the Storybook 👏

BannerActions

Looking for the API table of available props? We got you covered in the Storybook 👏