Notification banner
Figma
How to add
- Locate the Assets tab in the Layers Panel.
- 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.
- Once the component needed is located, click and drag it into the frame/artboard.
How to use
- Place the
Notification: Banner
component needed on the frame/artboard and choose a variant in the Inspector Panel. - Locate and expand the highlighted layer in the Layers Panel.
- Edit the text label.
- 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
orIcon > 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.
- 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
- Make sure to rename the new group.
- Locate the Design tab in the Inspector Panel.
- 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 👏
Edit this page on GitHub