Button

Triggers an action or event.

Examples

Default

The default button uses tone="neutral" and appearance="subtle".

import { Button } from '@var-ui/react';

<Button>Click me</Button>

Variants

Use tone and appearance to control color and surface treatment — the same vocabulary as Badge, Alert, and Banner.

• tone — neutral, accent, success, warning, danger, info
• appearance — filled, outline, subtle, ghost

Each row below is one appearance; each button in the row is a different tone.

intent is an optional shorthand for common pairs: primary (accent + filled), secondary (neutral + subtle), ghost (accent + ghost), danger (danger + filled), outline (accent + outline).

import { Button, HStack, VStack } from '@var-ui/react';

const tones = ['neutral', 'accent', 'success', 'warning', 'danger', 'info'] as const;
const appearances = ['filled', 'outline', 'subtle', 'ghost'] as const;

<VStack gap="lg">
  {appearances.map((appearance) => (
    <HStack key={appearance} gap="sm" wrap>
      {tones.map((tone) => (
        <Button key={tone} tone={tone} appearance={appearance}>
          {tone}
        </Button>
      ))}
    </HStack>
  ))}
</VStack>

Disabled

Pass isDisabled to remove the button from the tab order and block press events.

import { Button, HStack } from '@var-ui/react';

<HStack gap="sm" wrap>
  <Button isDisabled>Disabled</Button>
  <Button tone="accent" appearance="filled" isDisabled>
    Disabled primary
  </Button>
</HStack>

HTML

Set data-tone and data-appearance on a .var-ui-button element (plus data-size and data-layout when needed). In TypeScript, use button({ tone, appearance }) from @var-ui/core, or resolveButtonProps({ intent }) for the shorthand mapping.

Props

Accessibility

Built on React Aria Components where applicable.