Display

Alert

An inline message about the state of something on the page. Compound because the parts are optional and their order is the caller's.

Tone

Use tone to say what kind of message it is. Alert.Icon picks its own glyph from it, so the tone is written once.

Scheduled maintenance

The registry will be read-only on Saturday from 02:00 to 04:00 KST.

Deploy finished

style-tokens@0.1.0 published to npm 40 seconds ago.

Token nearly expired

The publish token expires in 6 days. Rotate it before the next release.

Build failed

components-react could not resolve base-react/select. See the CI log.

{TONES.map(([tone, title, description]) => (
  <Alert.Root key={tone} tone={tone}>
    <Alert.Icon />
    <Alert.Body>
      <Alert.Title>{title}</Alert.Title>
      <Alert.Description>{description}</Alert.Description>
    </Alert.Body>
  </Alert.Root>
))}

With an action

Anything placed after Alert.Body is pushed to the far edge and centered against the block. A button there takes the alert's tone rather than the document's accent.

Nothing to publish: the working tree is clean.

Two packages need rebuilding

They depend on this one at workspace:^.

<Alert.Root tone="neutral">
  <Alert.Icon name="info" />
  <Alert.Body>
    <Alert.Description>Nothing to publish: the working tree is clean.</Alert.Description>
  </Alert.Body>
</Alert.Root>

<Alert.Root tone="error">
  <Alert.Icon />
  <Alert.Body>
    <Alert.Title>Two packages need rebuilding</Alert.Title>
    <Alert.Description>They depend on this one at workspace:^.</Alert.Description>
  </Alert.Body>
  <Button size="s">Rebuild</Button>
</Alert.Root>

live makes a screen reader announce the alert as it appears. Use it for something that arrived in response to an action. Leave it off for a banner that was on the page all along, or it is read out on every navigation.

Parts

Import it as a namespace, and the parts work on either side of the server boundary.

import * as Alert from '@minuk-hwang-design-system/components-react/alert';

Part	What it is
`Alert.Root`	Holds the tone and passes it down. Optionally a live region.
`Alert.Icon`	Defaults to the glyph matching the tone. Always decorative.
`Alert.Body`	Everything right of the icon, so text stays aligned when it wraps.
`Alert.Title`	Optional. A one-line alert does not need one. A `Text`, so it takes every prop of one.
`Alert.Description`	The message. A `Text`, so it takes every prop of one, and `leading="reading"` opens the line height when the message runs to a paragraph.

Props

Prop	Type	Default	Notes
`tone`	`'neutral' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error'`	'info'	Sets the tint and the default icon.
`live`	`boolean`	false	role="alert". For messages that arrive, not banners that were always there.