Components

Banner

A full-width message at the top of the app or page about something that affects everything below.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { Banner } from '@bigbang/ui';
Source: Banner.tsx
Storybook: Banner · Playground

Banner is in the @bigbang/ui package.

import { Banner, Link } from '@bigbang/ui';

<Banner tone="warning" action={<Link href="/status">Details</Link>}>
  Maintenance is planned tonight from 23.00 to 01.00.
</Banner>;

Props

childrenRequired

Description: The message: one sentence about the whole app or page, such as planned maintenance.
Type: ReactNode

tone

Description: Meaning and colour: info for announcements, warning for something that affects work, danger for an outage or a blocked account, success rarely.
Type: AlertTone
Default: 'info'

action

Description: One link or button after the message, such as "Ayrıntılar".
Type: ReactNode

dismissible

Description: Shows a close button. The banner fades out and onDismiss runs; store the dismissal so it does not come back.
Type: boolean
Default: false

onDismiss

Description: Runs after the banner has been dismissed and has faded out.
Type: () => void

dismissLabel

Description: Accessible name of the close button. Defaults to the ui.alert.dismiss library string ("Uyarıyı kapat" or "Dismiss").
Type: string

announce

Description: Announces the banner when it appears after the page has loaded: danger as role="alert", other tones as role="status".
Type: boolean
Default: false

Data attributes

data-component="banner" and data-tone: on the root.
data-ending-style: while it is closing.