Return to top
On this page

Button

The button component is the primary component for user interaction. Buttons should primarily be used for interactivity and user actions, and not for navigation.

If you do want to use a Button for navigation purposes, you can set the tag property to an anchor (a) element.

vue
<script setup lang="ts">
import { Button } from '@sigveh/basic-ui'
</script>

<template>
  <Button theme="primary">Primary button</Button>
</template>

Demo

Controls

Type definitions

ts
interface ButtonProps {
  label?: string
  tag?: string
  size?: ButtonSize
  theme?: ButtonTheme
  loading?: boolean
  disabled?: boolean
  type?: ButtonType
}

type ButtonSize = 'small' | 'default'
type ButtonType = 'button' | 'submit' | 'reset'
type ButtonTheme = 'default' | 'primary' | 'secondary' | 'tertiary' | 'link'

Slots

  • default
  • icon-left
  • icon-right