Usage
import { Alert } from "chakra-ui-solid";<Alert.Root>
<Alert.Indicator />
<Alert.Content>
<Alert.Title />
<Alert.Description />
</Alert.Content>
</Alert.Root>If you prefer a closed component composition, check out the snippet below.
Examples
Description
Render the Alert.Description component to provide additional context to the alert.
Status
Change the status of the alerts by passing the status prop. This affects the color scheme and
icon used. Alert supports error, success, warning, and info statuses.
Variants
Use the variant prop to change the visual style of the alert. Values can be either subtle,
solid, outline, surface
With Close Button
Here’s and example of how to compose the Alert with a close button.
With Spinner
Here’s and example of how to compose the Alert with a spinner.
Custom Icon
Render your own icon inside Alert.Indicator to override the default icon for the alert status.
Color Palette Override
The default colorPalette is inferred from the status prop. To override the color palette, pass
the colorPalette prop.
Customization
You can style the Alert component using style props.
Closed Component
Here’s how to setup the Alert for a closed component composition.
Props
Root
| Prop | Default | Type |
|---|---|---|
inline | false | ConditionalValue<boolean>Whether the title and description sit on one line rather than stacking. |
size | 'md' | ConditionalValue<'sm' | 'md' | 'lg' | PresetVariant<'alert', 'size'>>The padding, the gap and the type scale together. |
status | 'info' | ConditionalValue<AlertStatus | PresetVariant<'alert', 'status'>>What the alert is telling the reader. It is a recipe variant *and* the value {@link AlertIndicator} reads to pick its glyph — the one thing the styling seam cannot supply, and the reason this Root opens a context of its own. |
variant | 'subtle' | ConditionalValue<'subtle' | 'surface' | 'outline' | 'solid' | PresetVariant<'alert', 'variant'>>How much of the palette the alert spends — a tint, a tint plus a ring, a ring, or a fill. |
Plus HTMLChakraProps<"div"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.