DUBanner
FeedbackFull-width announcement bar.
import { DUBanner, DUButton } from 'deri-ui';Live preview
Announcement banner with actions
typescript
<DUBanner tone="primary" action={<DUButton size="sm">Open</DUButton>}>New release</DUBanner>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | primary | success | warning | danger | info | — | Background |
| action | ReactNode | — | Trailing CTA |
| children | ReactNode | — | Message |
Usage
import { DUBanner, DUButton } from 'deri-ui';
<DUBanner tone="primary" action={<DUButton size="sm">Open</DUButton>}>New release</DUBanner>Customize with className, radius, and Tailwind utilities. Theme tokens come from deri-ui/tailwind.preset.
Related
© 2026 Deri Ui. Developed by Deribew Shimelis. Copy and use the code freely in your projects.