Button

Initiates an action, such as completing a task or submitting information

Default

Neutral

Danger

import { Button } from "@ngrok/mantle";

<Button>Outlined</Button>
<Button appearance="filled">Filled</Button>
<Button appearance="ghost">Ghost</Button>
<Button appearance="link">Link</Button>

<Button priority="neutral">Outlined</Button>
<Button priority="neutral" appearance="filled">Filled</Button>
<Button priority="neutral" appearance="ghost">Ghost</Button>
<Button priority="neutral" appearance="link">Link</Button>

<Button priority="danger">Outlined</Button>
<Button priority="danger" appearance="filled">Filled</Button>
<Button priority="danger" appearance="ghost">Ghost</Button>
<Button priority="danger" appearance="link">Link</Button>

Icon and Positioning

Use the icon prop to add an icon to the button. By default, it will render on the logical start side of the button. Use the iconPlacement prop to change the side the icon is rendered on.

import { Button } from "@ngrok/mantle";
import { Fire } from "@phosphor-icons/react/Fire";

<Button icon={<Fire weight="fill" />}>Icon Start</Button>
<Button icon={<Fire weight="fill" />} iconPlacement="end">
	Icon End
</Button>

State: Idle and Pending

Use state to indicate if the button is in a loading state. By default, the button is in an idle state. If you set the state to pending, the button will render a spinner and disable user interaction. If an icon is given, it will be replaced with the spinner. If no icon is given, the spinner will render on the side defined by iconPlacement.

Idle

Pending

import { Button } from "@ngrok/mantle";
import { Fire } from "@phosphor-icons/react/Fire";

<Button>No Icon + Idle</Button>
<Button icon={<Fire weight="fill" />}>Icon Start + Idle</Button>
<Button icon={<Fire weight="fill" />} iconPlacement="end">
	Icon End + Idle
</Button>
<Button state="pending">No Icon + Pending</Button>
<Button icon={<Fire weight="fill" />} state="pending">
	Icon Start + Pending
</Button>
<Button icon={<Fire weight="fill" />} iconPlacement="end" state="pending">
	Icon End + Pending
</Button>

Composition

When you want to render something else as a Button, you can use the asChild prop to compose. This is useful when you want to splat the Button styling onto a Link from remix or react-router.

See our colors!

import { Button } from "@ngrok/mantle";
import { Fire } from "@phosphor-icons/react/Fire";
import { Link } from "react-router-dom";

<Button appearance="filled" icon={<Fire weight="fill" />} asChild>
	<Link to="/base/colors">See our colors!</Link>
</Button>

API Reference

The Button accepts the following props in addition to the standard HTML button attributes.

Prop	Type	Default	Description
appearance	ghost filled outlined link	ghost	Defines the visual style of the `Button`.
asChild	boolean	false	Use the `asChild` prop to compose the `Button` styling and functionality onto alternative element types or your own React components.
icon	ReactNode	—	An icon to render inside the button. If the `state` is `pending`, then the icon will automatically be replaced with a spinner.
iconPlacement	start end	start	The side that the icon will render on, if one is present. If `state="pending"`, then the loading icon will also render on this side.
priority	default danger neutral	default	Indicates the importance or impact level of the button, affecting its color and styling to communicate its purpose to the user.
state	idle pending	idle	The state of the button. If the button should present a "loading state", use `pending`. Setting the state to `pending` will replace any icon with a spinner, or add one if an icon wasn't given. It will also disable user interaction with the button and set `aria-disabled`.