Alert

The inline status block: a start bar, a status glyph, a word lead, the message and an optional action, on the page ground with no fill.

import { Alert } from '@fairgarden-private/design/components/Alert'

status is required; without it, or without any words, nothing renders. The glyph's accessible name is the status in words, so status is never shape or color alone. role is status (polite), or alert for danger.

Statuses

Each status has its own shape and scale: info ○ indigo, success ● green, warning ▲ amber, danger ◆ red. title is the run-in lead; action is normally a Retry Button.

Trail closed. The ridge loop reopens after the nesting season.

Saved. Your volunteer shift is on the calendar.

High water. The lower ford may be impassable after rain.

Couldn't load. The map service didn't answer.

'use client'

import * as React from 'react'
import { Alert } from '@fairgarden-private/design/components/Alert'
import { Button } from '@fairgarden-private/design/components/Button'
import styles from './statuses.module.css'

export function AlertStatuses() {
  const [retries, setRetries] = React.useState(0)

  return (
    <div className={styles.stack}>
      <Alert status="info" title="Trail closed.">
        The ridge loop reopens after the nesting season.
      </Alert>
      <Alert status="success" title="Saved.">
        Your volunteer shift is on the calendar.
      </Alert>
      <Alert status="warning" title="High water.">
        The lower ford may be impassable after rain.
      </Alert>
      <Alert
        status="danger"
        title="Couldn't load."
        action={
          <Button variant="outline" size="md" onClick={() => setRetries((value) => value + 1)}>
            Retry
          </Button>
        }
      >
        The map service didn&apos;t answer{retries > 0 ? ` (${retries} retries)` : ''}.
      </Alert>
    </div>
  )
}

Primary and secondary

The status computes the secondary scale; an explicit secondary overrides it. primary sets the text ink.

Default. Info takes indigo from its status.

secondary="iris". The bar and glyph take the override.

primary="slate". The text ink comes from slate.

import { Alert } from '@fairgarden-private/design/components/Alert'
import styles from './color.module.css'

/** `status` computes the secondary; an explicit `secondary` wins. */
export function AlertColor() {
  return (
    <div className={styles.stack}>
      <Alert status="info" title="Default.">
        Info takes indigo from its status.
      </Alert>
      <Alert status="info" secondary="iris" title='secondary="iris".'>
        The bar and glyph take the override.
      </Alert>
      <Alert status="success" primary="slate" title='primary="slate".'>
        The text ink comes from slate.
      </Alert>
    </div>
  )
}

On grounds

On paper, forest and leaf

High water. Fords may flood on paper.

High water. Fords may flood on forest.

High water. Fords may flood on leaf.

import { Alert } from '@fairgarden-private/design/components/Alert'
import { PresetGround } from '@/components/PresetGround'
import styles from './grounds.module.css'

const presets = ['paper', 'forest', 'leaf'] as const

/** On forest and leaf the status marks resolve to the ground's ink. */
export function AlertGrounds() {
  return (
    <div className={styles.row}>
      {presets.map((preset) => (
        <PresetGround key={preset} preset={preset} className={styles.face}>
          <Alert status="warning" title="High water.">
            Fords may flood on {preset}.
          </Alert>
        </PresetGround>
      ))}
    </div>
  )
}

API Reference

The inline status block: start bar, status glyph (custom §1.5.4 shape with its inner mark), word lead, message and optional action, on the page ground with no fill.

role defaults to status (polite) and to alert for danger (§10.20); pass role="status" for a danger notice that does not block the task.

Renders nothing when status is missing, or when there is neither a title nor children: a status block needs a status and words (§1.5.4, §10.20), and an empty live region must not be announced.

Prop	Type	Description
`action`	`React.ReactNode \| undefined`	An optional action, normally a Retry Button (`variant="outline"`, `size="md"`).
`status`	`AlertStatus \| undefined`	Required by §10.20 (no default). Optional in the type only so a bare `<Alert />` compiles; without it nothing renders.
`statusLabel`	`string \| undefined`	The glyph’s accessible name; defaults to the English status word.
`title`	`React.ReactNode \| undefined`	The `type-runin` word lead, e.g. “Couldn’t load.” It runs into the message.

AlertProps

Props for Alert: div props (without title), render, the status, lead, action and color axes.

type AlertProps = Omit<useRender.ComponentProps<'div', {}, HTMLProps>, 'title'> &
  VariantProps<__type> & {
    status?: AlertStatus;
    title?: React.ReactNode;
    action?: React.ReactNode;
    statusLabel?: string;
  }

AlertStatus

type AlertStatus = 'info' | 'success' | 'warning' | 'danger'

Specification: DESIGN-SYSTEM.md §10.20 (alert) and §1.5.4 (status).