Alert

The default Alert style uses a neutral muted background, suitable for general-purpose informational callouts. No Variant parameter is needed as AlertVariant.Default is applied automatically. Compose content using AlertTitle and AlertDescription sub-components.

The Variant parameter controls the color scheme and visual meaning of the alert. Five variants are available: Default, Success, Info, Warning, and Danger. Each variant uses dedicated CSS custom properties for consistent theming across light and dark modes.

Set AccentBorder to true to display a thick 4px left border in the variant's accent color. This provides a stronger visual indicator and pairs well with icons for status-oriented messages. When disabled (the default), the alert uses a standard 1px border on all sides.

Use the Icon render fragment to add a visual icon to the alert. The icon is absolutely positioned in the top-left corner, and the alert content is automatically indented with left padding to accommodate it. Any render fragment works here including SVGs, icon fonts, or images.

Use the Class parameter to apply custom Tailwind CSS classes for project-specific alert styles beyond the built-in variants. This allows you to create alerts with custom colors, gradients, and border styles that match your brand or design system. Remember to provide both light and dark mode variants using the dark: prefix for a consistent experience.

Both AlertTitle and AlertDescription are optional. Use just a title for short, punchy messages, or just a description for longer explanatory text without a heading. This flexibility lets you tailor the alert's content density to the context.

A common real-world pattern showing a danger alert used to display form validation errors. The alert summarizes the issue while listing individual field errors, helping users quickly identify and correct problems. This pattern works well at the top of forms alongside inline field validation.

Set Dismissible to true to show a built-in close button (X) in the top-right corner. Use the OnDismiss callback to handle the dismiss action, such as hiding the alert or removing it from the DOM. This is a v3 feature that replaces the need for manual composition of close buttons.