Callout
A tinted box for a message in place: information, success, a warning or an error.
import { Callout } from "@butteryui/react";Demo
Wholesale prices stay in sync
When to use it
Use it for
- A form's error summary after a failed submit (role alert)
- A note that belongs with the content around it, such as where a price you change shows up
Not for
- Confirming an action that changed something out of view: use toast()
- An error on one field: pass it to the field's error
Examples
Callout tones
The four tones, each with its tint and icon: something to know, a result, a warning and an error.
Prices change on the 1st
Orders exported
Couldn't publish
Callout variants
The three looks: soft on the tone's tint, outlined on the surface, and with an accent bar at the start.
Roast dates print on every bag
Card declined
Price list sent
Error summary
A sign-in form's error summary, read out as it appears after a failed submit, with links to the fields.
Price sync note
A note that belongs with the content around it, there from the start, so it needs no role.
Wholesale prices stay in sync
Variants and states
Tones
Info, success, warning and danger, each with its icon and tint.
Wholesale prices stay in sync
Orders exported
Couldn't sign in
Variants
Soft fills with the tone's tint, outline draws a 1px edge in the tone's color on the surface, and accent adds a 4px bar of it along the start edge.
Roast dates print on every bag
Card declined
Low on green coffee
Props
Callout
| Prop | Type | Default | Description |
|---|---|---|---|
tone | "info" | "success" | "warning" | "danger" | "info" | What kind of message it is, which sets its tint and icon. Defaults to "info". |
variant | "soft" | "outline" | "accent" | "soft" | How it draws itself: "soft" (the default), the tone's tint; "outline", a 1px edge in the tone's color
on the surface; or "accent", the tint with a 4px bar of the tone's color along its start edge. |
title | ReactNode | A short heading for the message. | |
action | ReactNode | Something to do about it, such as a link or a small button, under the text. |
It also takes Omit<ComponentPropsWithRef<"div">, "title">.
Accessibility
No role of its own: give an error that appears after an action role="alert" and a result role="status", so they're read out; a callout there from the start needs neither. The icon marks the tone along with the tint, and every tone's text passes AA on its tint and on the surface an outline callout sits on.
It takes no keyboard input of its own.
Motion
It doesn't move.
With reduced motion: Nothing changes.
Layout
It fills the width it's given, with 12px of padding above and below and 16px at the sides, inside the 1px edge an outline callout draws or the 4px bar an accent one has at its start; its text wraps, and the icon stays centered on the first line. It takes no presses itself: links and buttons in its body or action bring their own hit areas, a link on a line of its own reaching 24px.