Notification banner
Figma
How to add
- Locate the Assets tab in the Layers Panel.
- There are two ways to locate the
Notification: Bannercomponent 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: Bannercomponent needed on the frame/artboard. - Locate and expand the highlighted layer in the Layers Panel.
- Edit the text label.
- Select all the
Notification: Bannerheader 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
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| className | String | false | undefined | @ignore |
| children | Node | true | - | @ignore |
BannerMessage
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| children | String | true | - | Text content |
BannerIcon
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| variant | Enum 'info' │ 'warning' | false | info | Which icon background and fill color to use. Info = green, warning = red |
| children | Node | true | - | @ignore |
BannerActions
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| className | String | false | undefined | @ignore |
| placement | Enum 'bottom' │ 'left' | false | left | Placement of the action button/s |
| children | Node | true | - | @ignore |