Button

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

Default

Neutral

Danger

Disabled

import { Button } from "@ngrok/mantle/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/button";
import { Fire } from "@phosphor-icons/react";

isLoading

isLoading determines whether or not the button is in a loading state, default false. Setting isLoading 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.

Idle

isLoading

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

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 react-router Link. Keep in mind that when you use asChild the type prop will NOT be passed to the child component.

See our colors!

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

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	outlined	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.
isLoading	boolean	false	Determines whether or not the button is in a loading state, default `false`. Setting `isLoading` 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`.
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.
type	button reset submit	—	The default behavior of the `Button`. Unlike the native `button` element, unless you use the `asChild` prop, this prop is required and has no default value. See the MDN docs for more information. `"button"`: The button has no default behavior, and does nothing when pressed by default. `"reset"`: The button resets all the controls to their initial values. `"submit"`: The button submits the form data to the server.