Button

Change anything and watch the Button follow. The code under the canvas is always the one for what you see.

import { Button } from "@orvain/ui-react";
 
<Button intent="neutral">Button Label</Button>

Content

Label

Left icon

Right icon

Style

IntentNeutral

Variant

Size

Corners16px

State

Properties#

PropTypeDefaultDescription

variant

"primary" | "secondary" | "tertiary"

"primary"

The level of emphasis.

intent

"brand"

The colour, matched to what the action does.

size

"xxs" | "xs" | "sm" | "md" | "lg" | "xl"

"lg"

Height, padding, radius and type size together.

pill

boolean

false

Fully rounded ends.

iconOnly

boolean

false

A square button with one icon. Needs aria-label.

leftIcon

boolean

true

Show the icon before the label.

rightIcon

boolean

true

Show the icon after the label.

swapLeftIcon

ReactNode

—

Replace the left icon.

swapRightIcon

ReactNode

—

Replace the right icon.

swapSoloIcon

ReactNode

—

Replace the icon of an icon-only button.

loading

boolean

false

Shows a spinner, sets aria-busy and disables the button.

disabled

boolean

false

Inert and removed from the tab order.

children

ReactNode

—

The label.