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