ReferenceComponentsFeedback
Alert
Alert component API, behavior, and executable example.
Loading executable example…
API and events
Communicate messages, completion, and pending work with theme tokens and reduced-motion behavior.
export function Alert({
tone = "info",
title,
children,
slots,
slotProps,
unstyled,
...props
}: AlertProps): ReactNode;Props, functions, and events
| Member | Type | Required | Description | Related types |
|---|---|---|---|---|
id | string | undefined | No | The id member uses the string | undefined contract. | — |
testId | string | undefined | No | The testId member uses the string | undefined contract. | — |
label | string | undefined | No | The label member uses the string | undefined contract. | — |
description | string | undefined | No | The description member uses the string | undefined contract. | — |
disabled | boolean | undefined | No | The disabled member uses the boolean | undefined contract. | — |
readOnly | boolean | undefined | No | The readOnly member uses the boolean | undefined contract. | — |
tone | Tone | undefined | No | The tone member uses the Tone | undefined contract. | — |
title | string | undefined | No | The title member uses the string | undefined contract. | — |
children | ReactNode | No | The children member uses the ReactNode contract. | — |
slots | Partial<SlotComponents<{ root: import("../../../registry/primitives/box").BoxProps; icon: import("../../../registry/data-display/text").TextProps; title: import("../../../registry/data-display/text").TextProps; content: import("../../../registry/data-display/text").TextProps; }>> | undefined | No | The slots member uses the Partial<SlotComponents<{ root: import("../../../registry/primitives/box").BoxProps; icon: import("../../../registry/data-display/text").TextProps; title: import("../../../registry/data-display/text").TextProps; content: import("../../../registry/data-display/text").TextProps; }>> | undefined contract. | BoxProps, SlotComponents, TextProps |
slotProps | Partial<SlotProps<{ root: import("../../../registry/primitives/box").BoxProps; icon: import("../../../registry/data-display/text").TextProps; title: import("../../../registry/data-display/text").TextProps; content: import("../../../registry/data-display/text").TextProps; }, { readonly tone: "info" | "success" | "warning" | "danger"; }>> | undefined | No | The slotProps member uses the Partial<SlotProps<{ root: import("../../../registry/primitives/box").BoxProps; icon: import("../../../registry/data-display/text").TextProps; title: import("../../../registry/data-display/text").TextProps; content: import("../../../registry/data-display/text").TextProps; }, { readonly tone: "info" | "success" | "warning" | "danger"; }>> | undefined contract. | BoxProps, SlotProps, TextProps |
unstyled | boolean | undefined | No | The unstyled member uses the boolean | undefined contract. | — |
variant | string | undefined | No | The variant member uses the string | undefined contract. | — |
size | "sm" | "md" | "lg" | undefined | No | The size member uses the "sm" | "md" | "lg" | undefined contract. | — |
No events are emitted.
Callback props run after the documented input is accepted. Callbacks are not cancellable unless their return type or description states otherwise.
Interaction and capabilities
Read-only; update props as application state changes.
The published manifest records keyboard, focus, pointer, theme, terminal, semantic, event, and dependency requirements.
Complete import
import { Alert } from "@/components/tuil/feedback/alert";