Buttons - Wilout UI

Variants

Use semantic color variants to convey meaning.

Solid Variants

<button class="ui-btn ui-btn--primary">Primary</button>
<button class="ui-btn ui-btn--secondary">Secondary</button>
<button class="ui-btn ui-btn--success">Success</button>
<button class="ui-btn ui-btn--danger">Danger</button>
<button class="ui-btn ui-btn--warning">Warning</button>
<button class="ui-btn ui-btn--info">Info</button>

Outline Variants

Outline buttons for secondary actions or less visual weight.

<button class="ui-btn ui-btn--outline-primary">Primary</button>
<button class="ui-btn ui-btn--outline-danger">Danger</button>

Ghost Variants

Ghost buttons have no border. Great for toolbars or inline actions.

<button class="ui-btn ui-btn--ghost">Ghost</button>
<button class="ui-btn ui-btn--ghost-primary">Ghost Primary</button>
<button class="ui-btn ui-btn--link">Link Style</button>

Sizes

Four size options: xs, sm (default), lg, xl.

<button class="ui-btn ui-btn--primary ui-btn--xs">Extra Small</button>
<button class="ui-btn ui-btn--primary ui-btn--sm">Small</button>
<button class="ui-btn ui-btn--primary">Default</button>
<button class="ui-btn ui-btn--primary ui-btn--lg">Large</button>
<button class="ui-btn ui-btn--primary ui-btn--xl">Extra Large</button>

States

Buttons support disabled and loading states.

<button class="ui-btn ui-btn--primary" disabled>Disabled</button>
<button class="ui-btn ui-btn--primary ui-btn--loading">Loading</button>

Modifiers

Additional modifiers for common use cases.

Block (Full Width)

Pill Shape

Icon Buttons

Button Group

Group related buttons together.

Horizontal Group

Vertical Group

<div class="ui-btn-group">
  <button class="ui-btn ui-btn--outline-primary">Left</button>
  <button class="ui-btn ui-btn--outline-primary">Center</button>
  <button class="ui-btn ui-btn--outline-primary">Right</button>
</div>

<div class="ui-btn-group ui-btn-group--vertical">
  <button class="ui-btn ui-btn--outline-primary">Top</button>
  <button class="ui-btn ui-btn--outline-primary">Bottom</button>
</div>

As Links

Use button classes on anchor elements.

Link Button Outline Link

<a href="#" class="ui-btn ui-btn--primary">Link Button</a>

CSS Classes Reference

Class	Description
`.ui-btn`	Base button class (required)
`.ui-btn--{variant}`	primary, secondary, success, danger, warning, info
`.ui-btn--outline-{variant}`	Outline version of each variant
`.ui-btn--ghost`	No border or background
`.ui-btn--link`	Looks like a text link
`.ui-btn--xs\|sm\|lg\|xl`	Size modifiers
`.ui-btn--block`	Full width
`.ui-btn--pill`	Fully rounded corners
`.ui-btn--icon`	Square padding for icon-only buttons
`.ui-btn--loading`	Shows loading spinner
`.ui-btn--disabled`	Disabled state (CSS-only)