Theme:
Button
Buttons trigger actions. DengaUI provides color variants, outline/ghost/link styles, multiple sizes, shapes, a loading state, and button groups.
Color Variants
<button class="dui-btn">Default</button>
<button class="dui-btn dui-btn-primary">Primary</button>
<button class="dui-btn dui-btn-secondary">Secondary</button>
<button class="dui-btn dui-btn-accent">Accent</button>
<button class="dui-btn dui-btn-info">Info</button>
<button class="dui-btn dui-btn-success">Success</button>
<button class="dui-btn dui-btn-warning">Warning</button>
<button class="dui-btn dui-btn-error">Error</button>
Outline
<button class="dui-btn dui-btn-outline dui-btn-primary">Primary</button>
<button class="dui-btn dui-btn-outline dui-btn-secondary">Secondary</button>
<button class="dui-btn dui-btn-outline dui-btn-accent">Accent</button>
Ghost & Link
<button class="dui-btn dui-btn-ghost">Ghost</button>
<button class="dui-btn dui-btn-link">Link style</button>
Sizes
<button class="dui-btn dui-btn-primary dui-btn-xs">Extra small</button>
<button class="dui-btn dui-btn-primary dui-btn-sm">Small</button>
<button class="dui-btn dui-btn-primary">Default</button>
<button class="dui-btn dui-btn-primary dui-btn-lg">Large</button>
<button class="dui-btn dui-btn-primary dui-btn-xl">Extra large</button>
Shapes
<button class="dui-btn dui-btn-primary dui-btn-circle">A</button>
<button class="dui-btn dui-btn-secondary dui-btn-square">B</button>
<button class="dui-btn dui-btn-accent dui-btn-wide">Wide button</button>
<button class="dui-btn dui-btn-info dui-btn-block">Block button</button>
Loading State
<button class="dui-btn dui-btn-primary dui-btn-loading">Saving...</button>
<button class="dui-btn dui-btn-loading">Loading</button>
Disabled
<button class="dui-btn dui-btn-primary" disabled>Disabled</button>
Button Group
<div class="dui-btn-group">
<button class="dui-btn dui-btn-primary">Left</button>
<button class="dui-btn dui-btn-primary">Center</button>
<button class="dui-btn dui-btn-primary">Right</button>
</div>