Button Components

The Buttons component set in Blox provides a variety of styles, including primary, outline, different sizes and more. All buttons are fully responsive and customizable using CSS variables. You can quickly integrate them into your project by copying the code snippet provided with each variant. If you are new to blox, follow our getting started guide to add blox to your project.

Solid Variants

<button class="btn btn-primary">
  Primary
</button>

<button class="btn btn-secondary">
  Secondary
</button>

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

<button class="btn btn-primary btn-animated">
  Animated
</button>

<button class="btn btn-primary btn-rounded">
  Rounded
</button>

<button class="btn btn-success">
  Success
</button>

<button class="btn btn-error">
  Error
</button>

<button class="btn btn-warning">
  Warning
</button>

<button class="btn btn-info">
  Info
</button>

<button class="btn btn-light">
  Light
</button>

<button class="btn btn-dark">
  Dark
</button>

<button class="btn btn-link">
  Link
</button>

Outline Variants

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

<button class="btn btn-outline-secondary">
  Secondary
</button>

<button class="btn btn-success">
  Success
</button>

Size Variants

<button class="btn btn-primary btn-lg">
  Large
</button>

<button class="btn btn-primary btn-sm">
  Small
</button>