DUBadge
ElementsStatus and label chips with solid, soft, and outline appearances.
import { DUBadge } from 'deri-ui';Live preview
SolidSoftOutlineLarge
typescript
<DUBadge>New</DUBadge>
<DUBadge appearance="soft" variant="success" pill>Live</DUBadge>
<DUBadge appearance="outline" size="lg">Beta</DUBadge>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | primary | secondary | success | danger | warning | info | dark | outline | 'primary' | Color |
| appearance | 'solid' | 'soft' | 'outline' | 'solid' | Fill style |
| size | 'sm' | 'md' | 'lg' | 'md' | Size |
| radius | DURadius | 'md' | Corner radius (ignored when pill) |
| pill | boolean | false | Fully rounded chip |
| soft | boolean | false | Legacy soft alias |
Usage
import { DUBadge } from 'deri-ui';
<DUBadge>New</DUBadge>
<DUBadge appearance="soft" variant="success" pill>Live</DUBadge>
<DUBadge appearance="outline" size="lg">Beta</DUBadge>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.