DUAlert
FeedbackInline feedback with soft, solid, outline, and left-accent styles.
import { DUAlert } from 'deri-ui';Live preview
Soft
Default soft appearance
Solid style
Outline style
Left accent + dismissible
typescript
<DUAlert tone="success" title="Saved">Your changes are live.</DUAlert>
<DUAlert appearance="solid" tone="danger" dismissible>Delete failed</DUAlert>
<DUAlert appearance="left" tone="info">Tip: use className to customize.</DUAlert>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | primary | success | warning | danger | info | 'primary' | Color |
| appearance | 'soft' | 'solid' | 'outline' | 'left' | 'soft' | Visual style |
| title | string | — | Optional heading |
| dismissible | boolean | false | Show close button |
| icon | ReactNode | — | Leading icon |
| radius | DURadius | 'md' | Corner radius |
Usage
import { DUAlert } from 'deri-ui';
<DUAlert tone="success" title="Saved">Your changes are live.</DUAlert>
<DUAlert appearance="solid" tone="danger" dismissible>Delete failed</DUAlert>
<DUAlert appearance="left" tone="info">Tip: use className to customize.</DUAlert>Customize with className, radius, and Tailwind utilities. Theme tokens come from deri-ui/tailwind.preset.
© 2026 Deri Ui. Developed by Deribew Shimelis. Copy and use the code freely in your projects.