Button

The Button component is a versatile and commonly used element in user interfaces, designed to trigger actions or events when clicked. It can be customized in various ways, including size, tone, and variant, to suit different design needs. The button can also include icons for enhanced visual communication and can be disabled to prevent user interaction when necessary. The button supports a loading state that disables interaction and displays a customizable spinner during async operations.

Basic Usage

<spr-button>Button</spr-button>

Tone

<spr-button>Neutral/Default</spr-button>
<spr-button tone="success">Success</spr-button>
<spr-button tone="danger">Danger</spr-button>

Sizes

<spr-button size="small">Small</spr-button>
<spr-button>Medium/Default</spr-button>
<spr-button size="large">Large</spr-button>

Variant

// Primary/Default
<spr-button>Primary/Default</spr-button>
<spr-button variant="secondary">Secondary</spr-button>
<spr-button variant="tertiary">Tertiary</spr-button>

// Succees
<spr-button tone="success">Primary/Default</spr-button>
<spr-button tone="success" variant="secondary">Secondary</spr-button>
<spr-button tone="success" variant="tertiary">Tertiary</spr-button>

// Danger
<spr-button tone="danger">Primary/Default</spr-button>
<spr-button tone="danger" variant="secondary">Secondary</spr-button>
<spr-button tone="danger" variant="tertiary">Tertiary</spr-button>

Disabled

<spr-button disabled ize="small">Small</spr-button>
<spr-button disabled>Medium/Default</spr-button>
<spr-button disabled size="large">Large</spr-button>

Loading

When performing async operations like form submission or data fetching, use the loading prop to show a spinner and disable the button. The loading icon can be customized via the loadingIcon prop.

<!-- Basic loading -->
<spr-button :loading="isSubmitting" @click="submit">Submit</spr-button>

<!-- Custom loading icon -->
<spr-button :loading="saving" loading-icon="svg-spinners:ring-resize" loading-duration="0.7">Custom Icon</spr-button>

<!-- Button with icon (slot content is replaced by spinner when loading) -->
<spr-button :loading="loading" has-icon>
  <Icon icon="ph:plus" />
  <span>Add Item</span>
</spr-button>

<!-- Button that will enter loading mode for 5 seconds after clicking it -->
<script setup>
import { ref } from 'vue';

const loading = ref(false);

function handleClick() {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 5000);
}
</script>

<template>
  <spr-button :loading="loading" @click="handleClick">Click me</spr-button>
</template>

Icon

Icon With Text

Icon Only

<template>
  <spr-button hasIcon>
    <Icon icon="ph:trash" />
    <span>Button</span>
  </spr-button>

  <spr-button iconOnly>
    <Icon icon="ph:trash" />
    <span>Button</span>
  </spr-button>
</template>

<script lang="ts" setup>
import { Icon } from '@iconify/vue';
</script>

Fullwidth

<spr-button fullwidth>Button</spr-button>

API Reference

Props

Name	Description	Type	Default
tone	Controls the button's color theme. Use neutral for standard actions, success for positive actions, and danger for destructive actions.	'neutral' | 'success' | 'danger'	'neutral'
size	Defines the button's size, affecting padding, font size, and overall dimensions.	'small' | 'medium' | 'large'	'medium'
variant	Controls the button's visual style. primary provides the strongest emphasis, secondary has medium emphasis with an outline, and tertiary offers the subtlest styling.	'primary' | 'secondary' | 'tertiary'	'primary'
type	Specifies the native HTML button type attribute.	'button' | 'submit' | 'reset'	'button'
state	Defines the visual state of the button. Mostly used internally.	'base' | 'hover' | 'pressed' | 'focus'	'base'
disabled	When set to true, prevents user interaction and applies a visual disabled state.	boolean	false
hasIcon	Indicates that the button contains an icon, which affects spacing and layout.	boolean	false
fullwidth	When set to true, the button will expand to fill the width of its container.	boolean	false
loading	When true, disables the button and displays a loading spinner instead of the slot content. Use during async operations like form submission.	boolean	false
loadingIcon	Iconify icon name for the loading spinner. Default is svg-spinners:180-ring. Use any Iconify icon identifier for a custom loader.	string	'svg-spinners:180-ring'
loadingDuration	Duration in seconds for the loading spinner animation.	number	0.6

Events

Name	Description	Parameters
click	Emitted when the button is clicked and not disabled.	(event: MouseEvent)

Slots

Name	Description
default	Content to be displayed inside the button. This can include text, icons, or other elements.

Accessibility

The button component follows accessibility best practices:

• Uses native <button> element for proper keyboard navigation and screen reader support
• Sets aria-disabled="true" when the button is disabled
• Sets aria-busy="true" when the button is in a loading state to indicate an ongoing operation to screen readers
• Preserves hover and focus states for keyboard users
• Maintains sufficient color contrast in all states and variants
• Supports autofocus when the state prop is set to 'focus'

Product Uses