DUButton
ElementsPrimary action control with solid, outline, ghost, link, and gradient styles.
import { DUButton } from 'deri-ui';Live preview
typescript
<DUButton variant="primary">Save</DUButton>
<DUButton variant="outline" size="sm">Cancel</DUButton>
<DUButton variant="gradient" loading>Processing</DUButton>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'outline' | 'ghost' | 'link' | 'gradient' | 'primary' | Visual style |
| size | 'sm' | 'md' | 'lg' | 'md' | Control size |
| loading | boolean | false | Shows spinner and disables click |
| fullWidth | boolean | false | Stretch to container width |
| leftIcon / rightIcon | ReactNode | — | Optional icons |
| ripple | boolean | true | Click ripple feedback |
| radius | DURadius ('none'|'sm'|'md'|'lg'|'xl'|'full') | 'md' | Corner radius |
| className | string | — | Extra Tailwind classes |
Usage
import { DUButton } from 'deri-ui';
<DUButton variant="primary">Save</DUButton>
<DUButton variant="outline" size="sm">Cancel</DUButton>
<DUButton variant="gradient" loading>Processing</DUButton>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.