0.16.1

Theme Switcher

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

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

API Reference

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

PropTypeDefaultDescription

appearance

  • ghost
  • filled
  • outlined
  • link
outlined

Defines the visual style of the Button.

asChild

booleanfalse

Use the asChild prop to compose the Button styling and functionality onto alternative element types or your own React components.

icon

ReactNodeAn 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

booleanfalse

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.