#Button

Triggers an action — reach for Link when the control navigates somewhere instead, ToggleButton when it stays switched on, and SplitButton or DropdownMenu when several related actions compete for one slot. Keep one variant='primary' per view, and reserve color='destructive' for actions that are hard to undo.

Source · Storybook

#Usage

import { Button } from '@wallarm-org/design-system/Button';

#Examples

#Variants

variant sets emphasis and color sets meaning, and only the pairings drawn here are designed: primary exists for brand and destructive only. neutral-alt has ghost and secondary variants, shown on an inverted surface so they remain readable in both themes.

#Sizes

Three heights at identical emphasis; large is the default, and the smaller two are for dense contexts like table rows and toolbars where a full-height button would dominate.

#Disabled

Every sanctioned pairing with the action unavailable. disabled also takes the button out of the tab order, so say somewhere on screen what would re-enable it rather than leaving the reader to guess.

#Loading

loading covers the content with a spinner but keeps the label's footprint, so the button doesn't resize mid-request. It disables the button on its own — passing disabled as well is redundant.

#Icons

An icon before the label, after it, or both. The button sizes and spaces icons itself, so pass the icon bare; and if one button in a row carries an icon, they all should.

#Badge

A NumericBadge after the label, for a count the action applies to. The button tightens its right padding whenever the last child isn't text, so a trailing badge or icon doesn't sit stranded.

#Icon only

There is no iconOnly prop: a button whose only child is an icon squares itself off. Give it an aria-label naming the action and a Tooltip, since nothing on screen says what it does.

#Link as button

asChild puts the button's styling on your own <a>, so the element stays a real link and middle-click and “open in new tab” keep working. Use it only when a navigation has to carry a button's weight; ordinary navigation is a Link.

#Full width

fullWidth fills the container, for narrow surfaces like a Drawer or a dialog footer rather than a wide desktop form. Two full-width buttons side by side split the row evenly instead of overflowing it.

#Props