Components

InlineAlert

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

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Default

The default tone is info. The title is optional; screen readers hear the tone before it (“Information:”).

Bilgi: A new version is ready

The new version opens when you reload the page.

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

export default function Default() {
  return (
    <InlineAlert title="A new version is ready">
      The new version opens when you reload the page.
    </InlineAlert>
  );
}

Tones

Each tone has its own background and icon; the border is neutral in every tone. Tone is also given by the icon shape and the spoken prefix, not only by colour.

Bilgi: A new version is ready

The new version opens when you reload the page.

Başarılı: Settings saved

Your changes will also apply next time you sign in.

Uyarı: Connection is slow

Changes may save with a delay.

Hata: The form could not be sent

Fix the marked fields and send it again.

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

export default function Tones() {
  return (
    <div className="flex flex-col gap-md">
      <InlineAlert tone="info" title="A new version is ready">
        The new version opens when you reload the page.
      </InlineAlert>
      <InlineAlert tone="success" title="Settings saved">
        Your changes will also apply next time you sign in.
      </InlineAlert>
      <InlineAlert tone="warning" title="Connection is slow">
        Changes may save with a delay.
      </InlineAlert>
      <InlineAlert tone="danger" title="The form could not be sent">
        Fix the marked fields and send it again.
      </InlineAlert>
    </div>
  );
}

With actions

actions puts up to two small buttons or links under the message.

Hata: The form could not be sent

Fix the marked fields and send it again.

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

export default function WithActions() {
  return (
    <InlineAlert
      tone="danger"
      title="The form could not be sent"
      actions={
        <>
          <Button size="sm" variant="secondary">
            Try again
          </Button>
          <Button size="sm" variant="tertiary">
            Details
          </Button>
        </>
      }
    >
      Fix the marked fields and send it again.
    </InlineAlert>
  );
}

Dismissible

On dismiss the alert fades, is then removed and focus moves to the next control.

Bilgi: A new version is ready

The new version opens when you reload the page.

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

export default function Dismissible() {
  return (
    <InlineAlert dismissible title="A new version is ready">
      The new version opens when you reload the page.
    </InlineAlert>
  );
}

Light and dark mode

The background comes from color-status-*-background, the border from color-border-subtle and the message from color-text-subtle.

Bilgi: A new version is ready

The new version opens when you reload the page.

Başarılı: Settings saved

Your changes will also apply next time you sign in.

Uyarı: Connection is slow

Changes may save with a delay.

Hata: The form could not be sent

Fix the marked fields and send it again.

Bilgi: A new version is ready

The new version opens when you reload the page.

Başarılı: Settings saved

Your changes will also apply next time you sign in.

Uyarı: Connection is slow

Changes may save with a delay.

Hata: The form could not be sent

Fix the marked fields and send it again.

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

export default function Tones() {
  return (
    <div className="flex flex-col gap-md">
      <InlineAlert tone="info" title="A new version is ready">
        The new version opens when you reload the page.
      </InlineAlert>
      <InlineAlert tone="success" title="Settings saved">
        Your changes will also apply next time you sign in.
      </InlineAlert>
      <InlineAlert tone="warning" title="Connection is slow">
        Changes may save with a delay.
      </InlineAlert>
      <InlineAlert tone="danger" title="The form could not be sent">
        Fix the marked fields and send it again.
      </InlineAlert>
    </div>
  );
}