Select UI framework
Get Started
Radix UI
AlertApp Store ButtonAspect RatioBadgeBannerBreadcrumbButton GroupButtonCheckboxCommand MenuCompactButtonDialogDrawerDropdown MenuEmptyFancy ButtonFile UploadHintInput OTPInputItemKbdLabelLinkButtonLoaderPopoverProgress BarProgress CircleRadio GroupRatingSelectSeparatorSkeletonSliderSocial ButtonSwitchTagTextareaToggle GroupToggleTooltip
Component alert-demo not found in registry.
Installation
pnpm dlx shadcn@latest add alert
Usage
Component alert-basic not found in registry.
Features
- Multiple variants: Filled, light, muted, and outlined styles
- Status types: Error, warning, success, info, and feature alerts
- Size options: Extra small, small, and large sizes
- Icon support: Optional icons for visual context
- Dismissible: Optional close button functionality
- Flexible content: Support for complex layouts and actions
- Accessible: Proper ARIA attributes and semantic structure
Variants
Visual Variants
Component alert-variants not found in registry.
Status Types
Component alert-statuses not found in registry.
Sizes
Component alert-sizes not found in registry.
Examples
Examples
Component alert-basic not found in registry.
Component alert-dismissible not found in registry.
Component alert-complex not found in registry.
Props
Alert.Root
This component provides a customizable alert container with support for different variants, statuses, and sizes.
Prop
Type
Default
variant
filledlightmutedoutlinedfilled
status
errorwarningsuccessinformationfeatureinformation
size
xsmallsmalllargesmall
onClose
() => void-
className
string-
children
ReactNode-