Button

Button with 5 variants, 3 sizes, a loading state with spinner, icon slots, and optional attention-grabbing animations.

Import

tsx

import { Button } from '@velocityuikit/velocityui'

Preview

Variants

Sizes

States

Animation

Props

Prop	Type	Default	Description
variant	`'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'danger'`	`'primary'`	Visual style of the button.
size	`'sm' \| 'md' \| 'lg'`	`'md'`	Controls padding and font size.
animation	`'none' \| 'pulse' \| 'shine'`	`'none'`	Optional visual emphasis for CTAs and highlighted actions.
loading	`boolean`	`false`	Replaces content with a spinner and disables interaction.
fullWidth	`boolean`	`false`	Makes the button fill its container width.
leftIcon	`ReactNode`	—	Icon rendered to the left of the label.
rightIcon	`ReactNode`	—	Icon rendered to the right of the label.
disabled	`boolean`	`false`	Native disabled attribute, also reduces opacity.

Examples

Variants

Five visual styles to match any context.

tsx

import { Button } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="danger">Danger</Button>
    </div>
  )
}

Sizes

tsx

import { Button } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
    </div>
  )
}

Loading state

tsx

import { Button } from '@velocityuikit/velocityui'

export default function Example() {
  return <Button loading>Saving...</Button>
}

With icons

tsx

import { Button } from '@velocityuikit/velocityui'

const ArrowIcon = () => (
  <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
  </svg>
)

export default function Example() {
  return (
    <Button rightIcon={<ArrowIcon />}>Continue</Button>
  )
}

Animated emphasis

tsx

import { Button } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
      <Button animation="pulse">Primary CTA</Button>
      <Button variant="secondary" animation="shine">Watch demo</Button>
    </div>
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

css

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */