Components

InlineAlert

An information, success, warning or error message inside the content about a section, a form or the page.

Storybook: Storybook
Source: Source

Installation

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

InlineAlert is in the @bigbang/ui package.

import { InlineAlert } from '@bigbang/ui';

<InlineAlert tone="danger" title="The form could not be sent" announce>
  Fix the marked fields and send it again.
</InlineAlert>;

Props

childrenRequired

Description: The message: one or two sentences that say what happened and what to do.
Type: ReactNode

tone

Description: Meaning, colour and icon: info for neutral information, success, warning for something that needs attention, danger for an error that blocks the task.
Type: AlertTone
Default: 'info'

title

Description: Short heading above the message.
Type: ReactNode

actions

Description: Buttons or links under the message, at most two, such as a secondary Button and a Link.
Type: ReactNode

dismissible

Description: Shows a close button. The alert fades out and onDismiss runs.
Type: boolean
Default: false

onDismiss

Description: Runs after the alert 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 alert when it appears after the page has loaded, such as after a form is submitted: danger as role="alert", other tones as role="status". Leave it off for an alert that is part of the page.
Type: boolean
Default: false

className

Description: For layout only: margins and placement.
Type: string

Data attributes

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