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.

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>

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

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
• 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