Initiates an action, such as completing a task or submitting information.
Default
Neutral
Danger
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>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 { FireIcon } from "@phosphor-icons/react/Fire";
<Button type="button" icon={<FireIcon weight="fill" />}>Icon Start</Button>
<Button type="button" icon={<FireIcon weight="fill" />} iconPlacement="end">
Icon End
</Button>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 { FireIcon } from "@phosphor-icons/react/Fire";
<Button type="button">No Icon + Idle</Button>
<Button type="button" icon={<FireIcon weight="fill" />}>Icon Start + Idle</Button>
<Button type="button" icon={<FireIcon weight="fill" />} iconPlacement="end">
Icon End + Idle
</Button>
<Button type="button" isLoading>No Icon + isLoading</Button>
<Button type="button" icon={<FireIcon weight="fill" />} isLoading>
Icon Start + isLoading
</Button>
<Button type="button" icon={<FireIcon weight="fill" />} iconPlacement="end" isLoading>
Icon End + isLoading
</Button>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 { FireIcon } from "@phosphor-icons/react/Fire";
import { Link, href } from "react-router";
<Button appearance="filled" icon={<FireIcon weight="fill" />} asChild>
<Link to={href("/base/colors")}>See our colors!</Link>
</Button>;All props from button, plus: