Feedback

Alert

A message in the page: what happened, and what to do.

import { Alert } from "@flinbu/seed";

Variants

Seed 1.2.0 is out

Focus ring tokens and a pill Tabs variant.

cs_204 applied

Figma updates on the next sync.

4 text colors fail contrast in Light

They sit below 4.5:1 on bg-primary since yesterday’s sync.

We couldn’t sync to Figma

Figma didn’t respond. Your changes are safe.

import { Alert, Button } from "@flinbu/seed";

<div className="flex w-full max-w-xl flex-col gap-sm">
  <Alert title="Seed 1.2.0 is out">Focus ring tokens and a pill Tabs variant.</Alert>
  <Alert variant="success" title="cs_204 applied">Figma updates on the next sync.</Alert>
  <Alert variant="warning" title="4 text colors fail contrast in Light" action={<Button size="sm" variant="secondary">Fix them</Button>}>
    They sit below 4.5:1 on bg-primary since yesterday’s sync.
  </Alert>
  <Alert variant="error" title="We couldn’t sync to Figma" onDismiss={() => {}}>Figma didn’t respond. Your changes are safe.</Alert>
</div>

Use it for

Errors and warnings about the page, success after an action, information people need now.

Use something else for

Messages that should disappear on their own: use a toast.

Props

Prop	Type	Default	Description
`variant`	`'neutral' \| 'info' \| 'success' \| 'warning' \| 'error' \| 'offer'`	`'info'`	Meaning and icon.
`title`	`ReactNode`	`none`	One line.
`icon`	`IconProp \| false`	`none`	Replace or hide the variant's icon.
`action`	`ReactNode`	`none`	One or two small Buttons.
`onDismiss`	`() => void`	`none`	Shows a close button.
`className`	`string`	`none`	Extra classes. They win over Seed's, so you can adjust one thing without forking.

Accessibility

error and warning are announced (role alert); the rest use role status.
The close button is labelled Dismiss (change it with dismissLabel).