Skip to main content

Button

Button is a widget that lets people trigger an action, such as submitting a form, opening a dialog, or deleting a project.

Import

import { Button } from '@vortexlabs/vortex';
import type { ButtonProps } from '@vortexlabs/vortex';

Allied components

InteractiveLink

Other links

Storybook
<Button
  variant="primary"
  size="sm"
  startIcon={Bolt}
>
  Button
</Button>

Features

  • Supports three variants and an optional critical tone.
  • Can contain text, startIcon, endIcon, or onlyIcon.
  • Supports loading and disabled states.
  • Supports responsive sizes, full-width layouts, and rounded corners.
  • Groups related buttons with Button.Group.
  • Renders a button by default or a link with href.
Reference Links
WAI-ARIA button pattern

Variants

Button has three variants that express action hierarchy: primary for the main action, secondary and tertiary for less important ones. The default is primary.

<Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
<Button variant="tertiary">Tertiary</Button>

Icons

Use startIcon and endIcon beside the label, or onlyIcon without one. onlyIcon requires ariaLabel.

<Button startIcon={<Hexagon />}>Start Icon</Button>
<Button endIcon={<Hexagon />}>End Icon</Button>
<Button startIcon={<Hexagon />} endIcon={<Hexagon />}>Both Icons</Button>
<Button onlyIcon={<Hexagon />} ariaLabel="Icon button" />
<Button onlyIcon={<Hexagon />} rounded ariaLabel="Icon button" />

Icon Only Buttons

Icon-only buttons work with every size, variant, and shape.

<Button onlyIcon={<Hexagon />} size="xs" ariaLabel="Icon button" />
<Button onlyIcon={<Hexagon />} size="sm" ariaLabel="Icon button" />
<Button onlyIcon={<Hexagon />} size="md" ariaLabel="Icon button" />
<Button onlyIcon={<Hexagon />} size="lg" ariaLabel="Icon button" />
<Button onlyIcon={<Hexagon />} rounded size="xs" ariaLabel="Icon button" />
<Button onlyIcon={<Hexagon />} rounded size="sm" ariaLabel="Icon button" />
<Button onlyIcon={<Hexagon />} rounded size="md" ariaLabel="Icon button" />
<Button onlyIcon={<Hexagon />} rounded size="lg" ariaLabel="Icon button" />

Sizes

Button has four sizes: xs, sm, md, and lg. The default is md.

<Button variant="primary" size="xs">XSmall</Button>
<Button variant="primary" size="sm">Small</Button>
<Button variant="primary" size="md">Medium</Button>
<Button variant="primary" size="lg">Large</Button>
<Button variant="secondary" size="xs">XSmall</Button>
<Button variant="secondary" size="sm">Small</Button>
<Button variant="secondary" size="md">Medium</Button>
<Button variant="secondary" size="lg">Large</Button>
<Button variant="tertiary" size="xs">XSmall</Button>
<Button variant="tertiary" size="sm">Small</Button>
<Button variant="tertiary" size="md">Medium</Button>
<Button variant="tertiary" size="lg">Large</Button>

Pass a breakpoint object to change size across breakpoints.

<Button variant="primary" size={{ xs: 'xs', lg: 'lg' }}>Button</Button>
<Button variant="secondary" size={{ sm: 'sm', md: 'md', lg: 'lg' }}>Button</Button>
<Button variant="tertiary" size={{ xs: 'xs', sm: 'sm', md: 'md', lg: 'lg' }}>Button</Button>

Shape

Buttons have square corners by default. Set rounded for fully rounded corners.

<Button rounded startIcon={<WandMagicSparkles />} endIcon={<WandMagicSparkles />}>Rounded</Button>
<Button endIcon={<Stars />}>Square</Button>
<Button onlyIcon={<Hexagon />} ariaLabel="Interactive button" />
<Button onlyIcon={<Hexagon />} rounded ariaLabel="Interactive button" />

Width

Set fullWidth to fill the container. It accepts a breakpoint object.

<Button fullWidth variant="primary">Button</Button>
<Button fullWidth={{ xs: true, sm: false }}>Button</Button>

States

Set loading while an action is in progress and disabled when the action is unavailable. Both block activation. Add loadingText to keep the label beside the spinner.

<Button loading>Loading...</Button>
<Button variant="secondary" loading loadingText size={{ xs: 'sm', lg: 'md' }}>Loading...</Button>
<Button disabled>Disabled</Button>
<Button disabled variant="secondary" endIcon={<Hexagon />}>Disabled</Button>

Tone

Use tone="critical" for destructive actions, such as deleting a project.

<Button variant="primary" tone="critical" size="xs">Primary</Button>
<Button variant="primary" tone="critical" size="sm">Primary</Button>
<Button variant="primary" tone="critical" size="md">Primary</Button>
<Button variant="primary" tone="critical" size="lg">Primary</Button>
<Button variant="secondary" tone="critical" size="xs">Secondary</Button>
<Button variant="secondary" tone="critical" size="sm">Secondary</Button>
<Button variant="secondary" tone="critical" size="md">Secondary</Button>
<Button variant="secondary" tone="critical" size="lg">Secondary</Button>
<Button variant="tertiary" tone="critical" size="xs">Tertiary</Button>
<Button variant="tertiary" tone="critical" size="sm">Tertiary</Button>
<Button variant="tertiary" tone="critical" size="md">Tertiary</Button>
<Button variant="tertiary" tone="critical" size="lg">Tertiary</Button>

Button.Group

Use Button.Group to join related buttons, such as a split action or a set of options.

<Button.Group>
  <Button rounded>Submit</Button>
  <Button rounded onlyIcon={<Hexagon />} ariaLabel="More options" />
</Button.Group>

<Button.Group>
  <Button variant="primary">One</Button>
  <Button variant="primary">Two</Button>
  <Button variant="primary">Three</Button>
</Button.Group>
<Button.Group>
  <Button variant="secondary">One</Button>
  <Button variant="secondary">Two</Button>
  <Button variant="secondary">Three</Button>
</Button.Group>
<Button.Group>
  <Button variant="tertiary">One</Button>
  <Button variant="tertiary">Two</Button>
  <Button variant="tertiary">Three</Button>
</Button.Group>

Button.Align

Button.Align applies negative margins so a button can sit flush with its parent’s edges.

<Stack borderColor="default" direction="row" gap={2}>
    <Stack.Item grow>
        <Placeholder />
    </Stack.Item>
    <Button.Align>
        <Button variant="tertiary" onlyIcon={<Hexagon />} ariaLabel="More options" />
    </Button.Align>
</Stack>

Alignment Options

The edges prop accepts a single edge or an array of edges. The default is "all".

<Button.Align edges="top">
    <Button variant="tertiary" onlyIcon={<Hexagon />} ariaLabel="More options" />
</Button.Align>
<Button.Align edges={["top", "end"]}>
  <Button variant="tertiary" onlyIcon={<Hexagon />} ariaLabel="More options" />
</Button.Align>
<Button.Align edges="bottom">
  <Button variant="tertiary" onlyIcon={<Hexagon />} ariaLabel="More options" />
</Button.Align>
<Button.Align edges="start">
  <Button variant="tertiary" onlyIcon={<Hexagon />} ariaLabel="More options" />
</Button.Align>
<Button.Align edges="end">
    <Button variant="tertiary" onlyIcon={<Hexagon />} ariaLabel="More options" />
</Button.Align>

Accessibility

Key
Description
EnterSpace
Pressing Enter or Space while a button is focused triggers its activation.
Provide ariaLabel when using onlyIcon.