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
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.
Show Code
Icons
Buttons can contain leftIcon, rightIcon, or onlyIcon. If you use onlyIcon, you should also provide an ariaLabel prop.
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.
Show Code
Buttons can adapt their size responsively according to the breakpoint.
Show Code
Shapes
Buttons have two shapes: rounded and default. The default shape is square.
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.
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.
Show Code
Tones
Currently, the button has one tone: critical. It is used for the most important actions.
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.
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.
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. |