Button
Initiates an action, such as completing a task or submitting information
Default
Neutral
Danger
Disabled
import { Button } from "@ngrok/mantle/button";
<Button type="button">Outlined</Button>
<Button type="button" appearance="filled">Filled</Button>
<Button type="button" appearance="ghost">Ghost</Button>
<Button type="button" appearance="link">Link</Button>
<Button type="button" priority="neutral">Outlined</Button>
<Button type="button" priority="neutral" appearance="filled">Filled</Button>
<Button type="button" priority="neutral" appearance="ghost">Ghost</Button>
<Button type="button" priority="neutral" appearance="link">Link</Button>
<Button type="button" priority="danger">Outlined</Button>
<Button type="button" priority="danger" appearance="filled">Filled</Button>
<Button type="button" priority="danger" appearance="ghost">Ghost</Button>
<Button type="button" priority="danger" appearance="link">Link</Button>
<Button disabled type="button" appearance="ghost" priority="default">
Ghost
</Button>
<Button disabled type="button" appearance="filled" priority="default">
Filled
</Button>
<Button disabled type="button" appearance="outlined" priority="default">
Outlined
</Button>
<Button disabled type="button" appearance="link" priority="default">
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/button";
import { Fire } from "@phosphor-icons/react/Fire";
<Button type="button" icon={<Fire weight="fill" />}>Icon Start</Button>
<Button type="button" icon={<Fire weight="fill" />} iconPlacement="end">
Icon End
</Button>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/Fire";
<Button type="button">No Icon + Idle</Button>
<Button type="button" icon={<Fire weight="fill" />}>Icon Start + Idle</Button>
<Button type="button" icon={<Fire weight="fill" />} iconPlacement="end">
Icon End + Idle
</Button>
<Button type="button" isLoading>No Icon + isLoading</Button>
<Button type="button" icon={<Fire weight="fill" />} isLoading>
Icon Start + isLoading
</Button>
<Button type="button" icon={<Fire weight="fill" />} iconPlacement="end" isLoading>
Icon End + isLoading
</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 react-router Link. 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/Fire";
import { Link, href } from "react-router";
<Button appearance="filled" icon={<Fire weight="fill" />} asChild>
<Link to={href("/base/colors")}>See our colors!</Link>
</Button>API Reference
The Button accepts the following props in addition to the standard HTML button attributes.