Button
Buttons allow users to take actions with a single tap.
Basic Usage
dart
1
DButton(label: 'Button')Variants
dart
1
2
3
4
5
DButton(label: 'Solid', variant: DButtonVariant.solid)
DButton(label: 'Outline', variant: DButtonVariant.outline)
DButton(label: 'Soft', variant: DButtonVariant.soft)
DButton(label: 'Ghost', variant: DButtonVariant.ghost)
DButton(label: 'Link', variant: DButtonVariant.link)Colors
dart
1
2
3
4
5
DButton(label: 'Primary', color: DButtonColor.primary)
DButton(label: 'Secondary', color: DButtonColor.secondary)
DButton(label: 'Success', color: DButtonColor.success)
DButton(label: 'Warning', color: DButtonColor.warning)
DButton(label: 'Error', color: DButtonColor.error)Sizes
dart
1
2
3
4
5
DButton(label: 'XS', size: DButtonSize.xs)
DButton(label: 'SM', size: DButtonSize.sm)
DButton(label: 'MD', size: DButtonSize.md)
DButton(label: 'LG', size: DButtonSize.lg)
DButton(label: 'XL', size: DButtonSize.xl)States
dart
1
2
DButton(label: 'Loading', loading: true)
DButton(label: 'Disabled', disabled: true)With Icons
dart
1
2
DButton(label: 'Settings', leadingIcon: DIcon(name: DIconNames.settings))
DButton(label: 'Next', trailingIcon: DIcon(name: DIconNames.arrowRight))Custom Styling
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Override background color
DButton(label: 'Custom BG', className: 'bg-purple-500 hover:bg-purple-600')
// Override border radius
DButton(label: 'Rounded Full', className: 'rounded-full')
// Add HTML id and extra classes
DButton(label: 'With ID', id: 'my-btn', className: 'shadow-lg')
// Pass arbitrary HTML attributes
DButton(label: 'Submit', attributes: {'data-testid': 'submit-btn'})
// Add custom event handlers
DButton(label: 'Track', events: {'mouseenter': (e) => track()})API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| label | String | required | Button text |
| variant | DButtonVariant | solid | Visual style |
| color | DButtonColor | primary | Color scheme |
| size | DButtonSize | md | Button size |
| disabled | bool | false | Disable interactions |
| loading | bool | false | Show loading spinner |
| leadingIcon | String? | null | Icon before label |
| trailingIcon | String? | null | Icon after label |
| onPressed | VoidCallback? | null | Click handler |
| className | String? | null | Additional/override Tailwind classes (smart merge) |
| id | String? | null | HTML id attribute |
| attributes | Map<String, String>? | null | Arbitrary HTML attributes |
| events | Map<String, EventCallback>? | null | Additional event handlers |