Notice

An inline message about the place it sits in. Its signal cell carries the tone as a shape and a colour, and its actions are cells on the same keylines. It never floats: a toast records something that happened, a notice describes something that is still true.

Loading the live example…

"use client"

import { useState } from "react"
import { Button } from "@/components/keyline/ui/button"
import { Notice } from "@/components/keyline/ui/notice"

export function PaperStock() {
  const [state, setState] = useState<"low" | "ordered" | "gone">("low")

  return (
    <div className="grid gap-3">
      <Notice
        open={state !== "gone"}
        live={state === "ordered"}
        tone={state === "low" ? "attention" : "done"}
        title={state === "low" ? "Letter paper is down to 30 cases" : "120 cases reordered from the mill"}
        description={
          state === "low" ? "That covers two days of deliveries. Darryl needs a week's notice." : "They arrive Thursday. Darryl has the dock booked."
        }
        actions={
          state === "low" ? (
            <Button layout="cell" variant="primary" onClick={() => setState("ordered")}>
              Reorder 120 cases
            </Button>
          ) : null
        }
        onDismiss={state === "ordered" ? () => setState("gone") : undefined}
      />
      {state === "gone" ? (
        <Button size="compact" variant="quiet" className="justify-self-start" onClick={() => setState("low")}>
          Show the warning again
        </Button>
      ) : null}
    </div>
  )
}

Installation

npx shadcn@latest add @keyline-ui/notice

Run it where your components.json is. The first time, map the @keyline-ui registry: one command, in Installation.

Usage

import { Notice } from "@/components/keyline/ui/notice"

<Notice
  tone="attention"
  title="Letter paper is down to 30 cases"
  description="That covers two days of deliveries."
  actions={<Button layout="cell" variant="primary">Reorder</Button>}
/>

Props

Prop	Type	Default	Description
`tone`	`"info" \| "done" \| "attention" \| "neutral"`	`"info"`	The signal cell: i, ✓, ! or a plain rule.
`title · description`	`ReactNode`	`—`	The condition, then what it means or what to do.
`actions`	`ReactNode`	`—`	Buttons with `layout="cell"`. They wrap below the message on a narrow width.
`onDismiss`	`() => void`	`—`	Adds a close cell.
`open`	`boolean`	`true`	false folds it back to its top keyline and makes it inert, so it can animate away.
`live`	`boolean`	`false`	Announces it when it appears. Use it for the result of something the reader just did.
`layout`	`"control" \| "cell"`	`"control"`	`cell` is a row of an enclosing frame, such as the top of a panel.

The signal is a shape as well as a colour, so it reads without colour vision. For a record of something that just happened, use Toast.