Buttons

Use custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Button Variants

Focus UI includes several predefined button variants, each serving its own semantic purpose:

HTML

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

Outline Buttons

Add .focus-btn-outline for outline-style buttons:

HTML

<button class="focus-btn focus-btn-primary focus-btn-outline">Primary</button>
<button class="focus-btn focus-btn-secondary focus-btn-outline">Secondary</button>
<button class="focus-btn focus-btn-success focus-btn-outline">Success</button>
<button class="focus-btn focus-btn-danger focus-btn-outline">Danger</button>

Button Sizes

Fancy larger or smaller buttons? Add .focus-btn-sm or .focus-btn-lg:

HTML

<button class="focus-btn focus-btn-primary focus-btn-sm">Small Button</button>
<button class="focus-btn focus-btn-primary">Default Button</button>
<button class="focus-btn focus-btn-primary focus-btn-lg">Large Button</button>

Buttons with Icons

Add icons inside buttons for extra visual context:

HTML

<button class="focus-btn focus-btn-primary">
  <i class="fa fa-save"></i> Save
</button>
<button class="focus-btn focus-btn-danger">
  <i class="fa fa-trash"></i> Delete
</button>
<button class="focus-btn focus-btn-success">
  <i class="fa fa-check"></i> Confirm
</button>

Block Buttons

Create full-width "block" buttons with .focus-btn-block:

HTML

<button class="focus-btn focus-btn-primary focus-btn-block">Block Button</button>
<button class="focus-btn focus-btn-secondary focus-btn-block">Another Block Button</button>

Disabled State

Make buttons look inactive by adding the disabled attribute:

HTML

<button class="focus-btn focus-btn-primary" disabled>Primary</button>
<button class="focus-btn focus-btn-secondary" disabled>Secondary</button>
<button class="focus-btn focus-btn-success" disabled>Success</button>

Interactive Button Builder

Customize a button and see the code update in real-time:

HTML

<button class="focus-btn focus-btn-primary">Button</button>

CSS Classes Reference

Class	Description
`.focus-btn`	Base button class (required)
`.focus-btn-primary`	Primary button variant (blue)
`.focus-btn-secondary`	Secondary button variant (gray)
`.focus-btn-success`	Success button variant (green)
`.focus-btn-danger`	Danger button variant (red)
`.focus-btn-warning`	Warning button variant (yellow)
`.focus-btn-info`	Info button variant (cyan)
`.focus-btn-outline`	Outline style (transparent background)
`.focus-btn-sm`	Small button size
`.focus-btn-lg`	Large button size
`.focus-btn-block`	Full-width block button