Alert

The Alert component includes four main variants: default (for general information), destructive (for errors and warnings), success (for positive feedback), and info (for helpful tips). Each variant has distinct styling and color schemes to effectively communicate different types of messages.

Yes! The Alert component uses CSS variables and design tokens, making it easy to customize colors to match your brand. You can modify the background, border, text, and icon colors through the design system tokens without breaking the component structure.

Absolutely. The Alert component follows WCAG accessibility guidelines and includes proper ARIA labels, semantic HTML structure, and appropriate color contrast ratios. It's designed to work with screen readers and keyboard navigation.

The Alert component has a dedicated slot for icons. Simply drag and drop your preferred icon into the icon slot, and it will automatically align and size correctly. The component works with Lucide icons, which are included in the design system.

Yes, the component is flexible. You can use it with just a title, just a description, or both. You can also hide the icon if needed. The component will automatically adjust its layout based on which elements are visible.

Yes, this Figma component is designed to match the shadcn/ui Alert component exactly. This ensures perfect design-to-development handoff and eliminates inconsistencies between design and implementation.