A message in the flow of the page: a tone, an icon, a title, a text and an optional action.

WebStableFeedback

Web only — React, from @krizaka/ui/alert. Stable: its API only changes in a major version.

When to use

To tell the reader something about the whole page or section: a new rule, an account state, a failed payment.
When the message must stay visible until the situation changes (a low balance, an expired card).
With an action when there is one obvious next step: “Top up”, “Retry”.

When not to use

For the result of an action the user just took (saved, sent): it should come and go.Use instead: Toast
When the user must answer before going on.Use instead: Dialog
To explain why a field is invalid: put the error under the field.Use instead: Field
When a list or a panel has nothing to show.Use instead: Empty state

Installation

Install

npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { Alert } from "@krizaka/ui/alert";

Examples

Info

The default tone: news the reader should know, announced politely.

New payout schedule

Payouts now arrive every Monday.

import { Alert } from "@krizaka/ui/alert";

const INFO = (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 16v-4M12 8h.01M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z" />
  </svg>
);

export default function AlertInfo() {
  return (
    <Alert title="New payout schedule" icon={INFO}>
      Payouts now arrive every Monday.
    </Alert>
  );
}

Success

A state that is now good: verified, paid, connected.

Account verified

You can now receive payouts.

import { Alert } from "@krizaka/ui/alert";

const CHECK = (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M20 6 9 17l-5-5" />
  </svg>
);

export default function AlertSuccess() {
  return (
    <Alert tone="success" icon={CHECK} title="Account verified">
      You can now receive payouts.
    </Alert>
  );
}

Warning

Something will go wrong soon, with what to do about it.

Low balance

Two tips left before a top-up.

import { Alert } from "@krizaka/ui/alert";
import { Button } from "@krizaka/ui/button";

const WARN = (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />
  </svg>
);

// `warning` and `danger` are announced at once (role="alert").
export default function AlertWarning() {
  return (
    <Alert tone="warning" icon={WARN} title="Low balance" action={<Button size="sm">Top up</Button>}>
      Two tips left before a top-up.
    </Alert>
  );
}

Danger

Something went wrong: what failed and how to fix it.

Payment failed

The card was declined. Try another one.

import { Alert } from "@krizaka/ui/alert";
import { Button } from "@krizaka/ui/button";

const WARN = (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />
  </svg>
);

export default function AlertDanger() {
  return (
    <Alert
      tone="danger"
      icon={WARN}
      title="Payment failed"
      action={
        <Button size="sm" variant="danger">
          Retry
        </Button>
      }
    >
      The card was declined. Try another one.
    </Alert>
  );
}

Title only

A short message needs no icon and no text.

New payout schedule

import { Alert } from "@krizaka/ui/alert";

export default function AlertTitleOnly() {
  return <Alert title="New payout schedule" />;
}

Props

Prop	Type	Default	Description
`action`	`ReactNode`	—	What to do: a Button, a link.
`icon`	`ReactNode`	—	A decorative icon (hidden from assistive technology).
`title`	`ReactNode`	—	The headline, in bold above the text.
`tone`	`AlertTone`	`info`	The tone: `danger` and `warning` are announced at once (`role="alert"`), `info` and `success` politely.

Accessibility

danger and warning render role="alert" (announced at once); info and success render role="status" (announced politely).
Render the alert when the situation occurs, not before: a live region only announces content that changes.
The icon is hidden from assistive technology; the title and the text carry the meaning.

Best practices

Lead with the title: what happened, in a few words; the text says what it means or what to do.
danger and warning only for what needs attention now: an alert that is always there stops being read.
The icon is decorative and the tone is carried by the tint, the border and the icon: the text stays legible in both themes.

Generated from the code of @krizaka/ui 2.0.0-beta.6: its meta.ts, its examples and its types.Edit this documentation on GitHub

Alert