Button

Buttons are widgets that trigger various actions like opening a dialog, confirming an action, or initiating a delete operation. They can contain text, icons, or both, and are clicked or tapped to execute the desired action.

Import

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

Display

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

Allied components

Link Interactive

PrimarySecondaryTertiary

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

Show Code

Icons

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

Left IconRight IconBoth Icons

Show Code

Icon Only Buttons

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

Show Code

Sizes

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

XSmallSmallMediumLarge

Show Code

Buttons can adapt their size responsively according to the breakpoint.

ButtonButtonButton

Show Code

Shapes

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

RoundedSquare

Show Code

Width

Buttons can be made full width by setting the fullWidth property to true. Or you can set it responsively according to the breakpoint.

ButtonButton

Show Code

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

Show Code

Tones

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

PrimaryPrimaryPrimaryPrimary

SecondarySecondarySecondarySecondary

TertiaryTertiaryTertiaryTertiary

Show Code

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

Show Code

Button.Aligner

Component.Aligner 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.

Show Code

Alignment Options

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

Show Code

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.

Keyboard Interactions

Key	Description
⬢	aria-label is required for buttons that contain onlyIcon prop.
Enter Space	Pressing Enter or Space while a button is focused triggers its activation.