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
vue
<spr-button>Button</spr-button>Tone
vue
<spr-button>Neutral/Default</spr-button>
<spr-button tone="success">Success</spr-button>
<spr-button tone="danger">Danger</spr-button>Sizes
vue
<spr-button size="small">Small</spr-button>
<spr-button>Medium/Default</spr-button>
<spr-button size="large">Large</spr-button>Variant
vue
// 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
vue
<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
vue
<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
vue
<spr-button fullwidth>Button</spr-button>API Reference
| Name | Description | Type | Default |
|---|---|---|---|
| tone | button tone | 'neutral' | 'success' | 'danger' | neutral |
| size | button size | 'small' | 'medium' | 'large' | medium |
| variant | button variant | 'primary' | 'secondary' | 'tertiary' | tertiary |
| disabled | disable the button | boolean | false |
| tag | custom element tag | string / Component | button |
Product Uses
