Components

InlineAlert

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

Storybook: Storybook
Source: Source

When to use

InlineAlert shows a state people need to know about in a section or form, next to the content it concerns: a form that could not be sent, the effect of a setting, a missing step.

When not to use

For the passing result of an action: Use Toast.
For a state that affects the whole app: Use Banner.
For an error in one field: Show it under the field.
When a decision is needed: Use AlertDialog.

Anatomy

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>
  );
}

Tone icon.
Title: Optional.
Message.
Actions: At most two.
Close button: Optional.

Behaviour

The alert flows with the content; it takes space and pushes the page down.
For an alert that appears after load, turn on announce: danger is read at once, the others when their turn comes.
On dismiss it fades, is removed and focus moves to the next control.

Guidelines

Say what happened and what to do.
Put the alert right above the content it concerns.
Do not show more than one alert per section.
Keep errors non-dismissible; remove them when the problem is solved.

Content

Turkish	English
Form gönderilemedi	The form could not be sent
Yeniden dene	Try again
Uyarıyı kapat	Dismiss

Banner: A full-width message at the top of the app.
Toast: The passing result of an action.
Badge: The short status of an item.