Button

Base button primitive with variants, sizes, and states.

Variants

Sizes

States

Features

• 5 variants — primary, secondary, ghost, success, danger
• 3 sizes — sm, md, lg
• Loading state — Spinner with preserved width
• Full width — Expand to container
• Accessible — Focus visible, aria attributes

Usage

<script setup>
import { FkButton } from '@fortune-kit/components'
</script>

<template>
  <FkButton variant="primary" size="md" @click="handleClick">
    Click me
  </FkButton>
</template>

Props

Prop	Type	Default	Description
variant	string	'primary'	Visual style
size	'sm' | 'md' | 'lg'	'md'	Button size
disabled	boolean	false	Disabled state
loading	boolean	false	Loading state
fullWidth	boolean	false	Full container width
type	string	'button'	HTML button type

Variants

• primary — Gold/amber, main actions
• secondary — Gray, secondary actions
• ghost — Transparent, tertiary actions
• success — Green, positive actions
• danger — Red, destructive actions