Button

Six visual treatments, compact icon buttons, and clear loading and pressed states. Built for everyday actions and the moments that matter.

View source Installation

Preview

Action, with a little feedback.

Quieter, until you need them.

VariantSizeDisabledLoading

Try it. This is the real component.

<Button variant="primary" size="md">
  Continue
</Button>

Import

import { Button } from '@velocityuikit/velocityui'

Props

Prop	Type	Default	Description
variant	`'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'danger' \| 'soft'`	`'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`	Shows a spinner and disables interaction. Text labels stay visible; icon-only content is replaced.
fullWidth	`boolean`	`false`	Makes the button fill its container width.
iconOnly	`boolean`	`false`	Equal width and height for icon actions. Supply an aria-label to name the button.
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

Quiet actions and icon buttons

import { Button } from '@velocityuikit/velocityui'

export default function Actions() {
  return <div style={{ display: 'flex', gap: 8 }}>
    <Button type="button" variant="soft">Add to collection</Button>
    <Button type="button" variant="outline" iconOnly aria-label="Add item">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
    </Button>
  </div>
}

Variants

Six visual styles to match any context.

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="soft">Soft</Button>
      <Button variant="danger">Danger</Button>
    </div>
  )
}

Sizes

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

import { Button } from '@velocityuikit/velocityui'

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

With icons

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

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:

/* 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  dark-cyan  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

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