Banner

Users can triggers actions, such as form submission, dropdowns, or navigation.

Overview

Banners remain visible until actively dismissed by the user or until the issue that prompted the banner is resolved.

We recommend desktop notifications.

Enable

Ask later

Dismiss

We recommend desktop notifications.

Enable

Ask later

Dismiss

We recommend desktop notifications.

Enable

Ask later

Dismiss

We recommend desktop notifications.

Enable

Ask later

Dismiss

We recommend desktop notifications.

Enable

Ask later

Dismiss

We recommend desktop notifications.

Enable

Ask later

Dismiss

We recommend desktop notifications.

Enable

Ask later

Dismiss

Example: Default banner

  import { Banner, Icon } from '@skiff-org/skiff-ui';

    <Banner
      color='blue'
      ctas={[
        { label: 'Enable', onClick: () => ()=>{} },
        { label: 'Ask later', onClick: ()=>{} },
        { label: 'Dismiss', onClick:  ()=>{} }
      ]}
      icon={Icon.Bell}
      label='We recommend desktop notifications.'
    />

Properties

Name
label
Type
string
Description
Label displayed at the start of the banner.
Name
color
Type
AccentColor
Description
Background color of the Banner.
Name
ctas
Type
Array<BannerCTA>
Description
Array of actions added to the end of the banner.
Name
icon
Type
Icon
Description
Icon placed at the start of the banner.
Name
forceTheme
Type
ThemeMode
Description
Force the theme (dark or light mode) of the banner text, regardless of app theme.

Banner CTA Interface

Name
label
Type
string
Description
Label for the action.
Name
onClick
Type
() => void
Description
onClick function called when the action is clicked.