Qeetrix

Button

Examples

Variants

One primary action per view; secondary and outline beside it, ghost in toolbars, and destructive for actions that can't be undone.

Sizes

Four text sizes, and icon-only sizes that need an aria-label.

Loading

loading shows a spinner, sets aria-busy and ignores clicks while keeping focus. loadingLabel replaces the label for the duration and holds the button's width.

Usage

Import

import { Button } from "@qeetrix/ui";

It can also be imported on its own from @qeetrix/ui/components/button.

Variant props

PropValues
variantdefault · outline · secondary · ghost · destructive · link
sizedefault · xs · sm · lg · icon · icon-xs · icon-sm · icon-lg

States

hover · focus-visible · active · disabled · loading · invalid · busy

Support

FeatureStatus
Right-to-leftSupported
Dark modeSupported
DensitySupported
Server renderingRenders on the server
Reduced motionSupported

Accessibility

Follows the WAI-ARIA button pattern. Audited.

CheckResult
SemanticsPass
Accessible namePass
KeyboardPass
FocusPass
Screen readerPass
Right-to-leftNot applicable
Reduced motionPass
Forced coloursPass
ContrastPass

Keyboard

Enter Space Tab

Tests

Covered by unit, accessibility (axe), interaction and visual tests.

On this page

ExamplesVariantsSizesLoadingUsageImportVariant propsStatesSupportAccessibilityKeyboardTests