Button — Vortex Design System

Button

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

Features

Supports different variants.
Can contain text, leftIcon, rightIcon, or onlyIcon.
Supports loading, disabled state and tone.
Accepts ButtonGroup as a parent component.
Supports different shapes and sizes.
Assigns the correct HTML tag.

Reference Links

ARIA design pattern

Variants

Buttons come in three variants: primary, secondary, and tertiary. The primary variant is used for the most important actions, while the secondary and tertiary variants are used for less important actions.

PrimarySecondaryTertiary

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

Icons

Buttons can contain leftIcon, rightIcon, or onlyIcon. If you use onlyIcon, you should also provide an ariaLabel prop.

Left IconRight IconBoth Icons

<Button leftIcon={Hexagon}>Left Icon</Button>
<Button rightIcon={Hexagon}>Right Icon</Button>
<Button leftIcon={Hexagon} rightIcon={Hexagon}>Both Icons</Button>
<Button onlyIcon={Hexagon} ariaLabel="Icon button" />
<Button onlyIcon={Hexagon} rounded ariaLabel="Icon button" />

Icon Only Buttons

Icon only buttons are available in all sizes and can be combined with different variants and shapes.

<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

Buttons are available in three sizes: xs, sm, md, and lg. The default size is md.

XSmallSmallMediumLarge

<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>

Buttons can adapt their size responsively according to the breakpoint.

ButtonButtonButton

<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>

Shapes

Buttons have two shapes: rounded and default. The default shape is square.

RoundedSquare

<Button rounded leftIcon={WandMagicSparkles} rightIcon={WandMagicSparkles}>Rounded</Button>
<Button rightIcon={Stars}>Rounded</Button>
<Button onlyIcon={Hexagon} ariaLabel="Interactive button" />
<Button onlyIcon={Hexagon} rounded ariaLabel="Interactive button" />

Width

Buttons can be made full width by setting the fullWidth property to true.

ButtonButton

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

States

Buttons have two states: loading and disabled. The loading state is used when the button is waiting for an action to complete. The disabled state is used when the button is not available for interaction.

Loading...DisabledDisabled

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

Tones

Currently, the button has one tone: critical. It is used for the most important actions.

PrimaryPrimaryPrimaryPrimary

SecondarySecondarySecondarySecondary

TertiaryTertiaryTertiaryTertiary

<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>

Composition

Buttons can be composed with other components to create complex UI elements using a compound component approach.

Button.Group

Button.Group allows you to group multiple buttons together. It is useful when you want to group buttons that are related to each other, such as a set of actions or a set of options.

Submit

OneTwoThree

<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.Align

Component.Align is a versatile wrapper component that positions elements based on the specified side or an array of sides prop. It allows for flexible alignment of components within a parent container, enhancing layout control and adaptability.

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

Alignment Options

The side prop accepts single values or arrays for precise positioning.

<Button.Align side="top">
  <Button variant="tertiary" leftIcon={Hexagon} />
</Button.Align>
<Button.Align side={["top", "end"]}>
<Button variant="tertiary" leftIcon={Hexagon} />
</Button.Align>
<Button.Align side="bottom">
<Button variant="tertiary" leftIcon={Hexagon} />
</Button.Align>
<Button.Align side="start">
<Button variant="tertiary" leftIcon={Hexagon} />
</Button.Align>
<Button.Align side="end">
  <Button variant="tertiary" leftIcon={Hexagon} />
</Button.Align>

Accessibility

Buttons follow the WAI-ARIA Button design pattern and employ appropriate ARIA attributes to ensure accessibility and manage focus behavior for various button types.

Key

Description

EscapeEnter

Pressing Enter or Space while a button is focused triggers its activation.

aria-label is required for buttons that contain onlyIcon prop.