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.

Code Editor

Features

Supports different variants

Can contain text,

leftIcon

rightIcon

, or both

Supports loading state and disabled state

Accepts ButtonGroup as a parent component

Supports different shapes and sizes

Assigns the correct HTML tag

Reference Links

ARIA design pattern

Anatomy

Import all parts and combine them together.

import { Button } from '@umrel/umrel';
import type { ButtonProps } from '@umrel/umrel';

<Button onClick={() => {}} variant="primary" size="lg">
    Button
</Button>

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.

Code Editor

Sizes

Buttons are available in three sizes:

sm

md

, and

lg

. The default size is

md

Code Editor

Buttons can adapt their

size

responsively according to the breakpoint.

Code Editor

Shapes

Buttons have two shapes:

rounded

and

default

. The

default

shape is

square

Code Editor

Full Width

Buttons can be made full width by setting the

fullWidth

property to

true

. Or you can set it responsively according to the breakpoint.

Code Editor

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.

Code Editor

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.

Code Editor

Button Aligner

Button.Aligner

dynamically adjusts button spacing for seamless content alignment, offering precise positioning through flexible alignment configurations with

string

and

array

options.

Code Editor

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 only icons without text.
Enter Space	Pressing `Enter` or `Space` while a button is focused triggers its activation.