Button

A button triggers an action and signals its importance. Its label names the outcome, so users can decide without reading the surrounding interface.

UsageCopy Anchor Link

import { Button } from "@biem/ui/components/ui/button";

export function ButtonDefault() {
	return <Button>Review transfer</Button>;
}

ExamplesCopy Anchor Link

OutlineCopy Anchor Link

Beside its main action, a screen often offers an alternative, such as going back or closing a dialog. Set to "outline", variant keeps that alternative a clear choice while the main action holds the strongest emphasis.

SecondaryCopy Anchor Link

Many steps support a task without completing it, such as adding a note to a delivery. Such a step recedes behind the main action when variant is set to "secondary", so users recognize at once which action finishes the task.

GhostCopy Anchor Link

Toolbars hold actions that users need again and again, and these actions should not compete with the content around them. Once variant is set to "ghost", a button steps back behind that content and remains within reach whenever it is needed.

LinkCopy Anchor Link

Within running text or beside a figure, an action should not interrupt the reading. Here, variant set to "link" lends the button the emphasis of a link, yet it still triggers an action instead of leading users to another page.

DestructiveCopy Anchor Link

Removing a product from the assortment or deleting a price list often cannot be undone. Before users commit to such an action, variant set to "destructive" signals its consequence, so they recognize the risk while they can still decide against it.

Extra SmallCopy Anchor Link

Tables carry actions in every row, where a regular button would crowd the figures. In such rows, size set to "xs" lets a button claim the least room, so the data stays in the foreground.

SmallCopy Anchor Link

Filter bars and card headers hold several actions in little space. A button with size set to "sm" fits there without outweighing the content it belongs to.

Default SizeCopy Anchor Link

Most actions in forms, dialogs and page headers need no size of their own. Unless another size is set, a button takes the size "default", so actions keep the same scale across every product.

LargeCopy Anchor Link

One decisive action can define a whole screen, such as completing a stock count. With size set to "lg", a button gives that action more weight, so users find it at once.

With IconCopy Anchor Link

Where users scan many actions at once, an icon lets them recognize a familiar one before they read its label. The label still carries the meaning by naming the outcome, so the action stays clear even where the icon is unfamiliar.

As LinkCopy Anchor Link

Certain actions lead to another page instead of changing the current one. Through render, with nativeButton set to false, the button becomes a real link, so users can open the page in a new tab or share its address.

DisabledCopy Anchor Link

An action is sometimes unavailable for a moment, until a form is complete or the data behind it has loaded. Marked as disabled, the button accepts no interaction and exposes its state to assistive technology, so users still see the action without triggering it by mistake.

API ReferenceCopy Anchor Link