Skip to Content

Button

Used to trigger an action or event

Usage

import { Button } from "@opengovsg/oui"
<Button>Click me</Button>

Examples

Sizes

Use the size prop to change the size of the button.

Variants

Use the variant prop to change the visual style of the Button.

Start and end content

Use icons within a button

Color

Use the color prop to change the color of the button.

sub
main
neutral
critical
warning
success
inverse

Disabled

Use the isDisabled prop to disable the button.

Loading

Pass the isPending and loadingText props to the Button component to show a loading spinner and add a loading text.

Spinner Placement

Use the spinnerPlacement prop to change the placement of the spinner.

Custom Spinner

Use the spinner prop to change the spinner.

Radius

Use the radius prop to change the radius of the button.