Button

Trigger actions and interactions.

Basic Usage

Use a button element to trigger actions.

<button>Click me</button>

Variants

Buttons support multiple visual variants.

<button>Primary</button>
<button data-variant="secondary">Secondary</button>
<button data-variant="success">Success</button>
<button data-variant="danger">Danger</button>

Outline Buttons

<button data-style="outline">Outline</button>
<button data-variant="danger" data-style="outline">Outline Danger</button>

Sizes

<button data-size="sm">Small</button>
<button>Default</button>
<button data-size="lg">Large</button>

Ghost Buttons

Ghost buttons remove the background while retaining interactive states. 

<button data-style="ghost">Ghost</button>
<button data-style="ghost" data-variant="secondary">Secondary</button>
<button data-style="ghost" data-variant="danger">Danger</button>

Loading State

Use data-loading to display a built-in loading spinner. 

<button data-loading>Saving</button>
<button data-loading data-variant="secondary">Loading</button>

Disabled State

<button disabled>Disabled</button>
<button data-variant="secondary" disabled>
  Disabled Secondary
</button>

Icon Buttons

<button data-icon aria-label="Settings">
  <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2">
    <circle cx="12" cy="12" r="3"/>
    <path d="M19.4 15a1.7 1.7 0 0 0 .34 1.87l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.7 1.7 0 0 0-1.87-.34 1.7 1.7 0 0 0-1.04 1.56V21a2 2 0 1 1-4 0v-.09a1.7 1.7 0 0 0-1.04-1.56 1.7 1.7 0 0 0-1.87.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-1.56-1.04H3a2 2 0 1 1 0-4h.09A1.7 1.7 0 0 0 4.6 8.4a1.7 1.7 0 0 0-.34-1.87L4.2 6.47a2 2 0 1 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 8.96 4.04 1.7 1.7 0 0 0 10 2.48V2a2 2 0 1 1 4 0v.09a1.7 1.7 0 0 0 1.04 1.56 1.7 1.7 0 0 0 1.87-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 8.4c.66.27 1.1.91 1.1 1.63V10a2 2 0 1 1 0 4h-.09c-.72 0-1.36.44-1.63 1z"/>
  </svg>
</button>
<button data-icon data-style="outline" aria-label="Search">
  <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2">
    <circle cx="11" cy="11" r="7"/>
    <path d="m21 21-4.3-4.3"/>
  </svg>
</button>

Accessibility

MiniKit buttons use native HTML elements and preserve built-in keyboard and assistive technology support.

  • Use <button> for actions and <a> for navigation.
  • Icon-only buttons must include an aria-label.
  • Do not use color alone to communicate meaning.
  • Disabled buttons cannot receive keyboard focus or pointer interaction.
  • Loading buttons remain accessible while indicating background activity.

API

Attribute Applies To Description
data-variant="secondary" <button>, <a> Displays the secondary button variant.
data-variant="danger" <button>, <a> Displays the danger button variant.
data-style="outline" <button>, <a> Displays the outline style.
data-style="ghost" <button>, <a> Displays the ghost style.
data-size="sm" <button>, <a> Displays a small button.
data-size="lg" <button>, <a> Displays a large button.
data-icon <button>, <a> Creates a square icon button.
data-loading <button>, <a> Displays the built-in loading spinner and disables interaction.
disabled <button> Disables the button.
class="button" <a> Styles a link as a button.