Icon Button

Initiates an action, such as completing a task or submitting information. Renders only a single icon as children with an accessible, screen-reader-only label.

Size xs

Size sm

Size md

Disabled

import { IconButton } from "@ngrok/mantle/button";
import { GlobeIcon } from "@phosphor-icons/react/Globe";

<IconButton type="button" appearance="ghost" label="prestige worldwide" size="xs" icon={<GlobeIcon />} />
<IconButton type="button" appearance="outlined" label="prestige worldwide" size="xs" icon={<GlobeIcon />} />

<IconButton type="button" appearance="ghost" label="prestige worldwide" size="sm" icon={<GlobeIcon />} />
<IconButton type="button" appearance="outlined" label="prestige worldwide" size="sm" icon={<GlobeIcon />} />

<IconButton type="button" appearance="ghost" label="prestige worldwide" size="md" icon={<GlobeIcon />} />
<IconButton type="button" appearance="outlined" label="prestige worldwide" size="md" icon={<GlobeIcon />} />

isLoading

isLoading determines whether or not the icon button is in a loading state, default false. Setting isLoading will replace the icon with a spinner. It will also disable user interaction with the button and set aria-disabled.

idle

isLoading

import { IconButton } from "@ngrok/mantle/button";
import { GlobeIcon } from "@phosphor-icons/react/Globe";

<IconButton type="button" appearance="ghost" label="prestige worldwide" icon={<GlobeIcon />} />
<IconButton type="button" appearance="outlined" label="prestige worldwide" icon={<GlobeIcon />} />

<IconButton type="button" appearance="ghost" label="prestige worldwide" isLoading icon={<GlobeIcon />} />
<IconButton type="button" appearance="outlined" label="prestige worldwide" isLoading icon={<GlobeIcon />} />

Composition

When you want to render something else as a IconButton, you can use the asChild prop to compose. This is useful when you want to splat the IconButton 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 { IconButton } from "@ngrok/mantle/button";
import { GlobeIcon } from "@phosphor-icons/react/Globe";
import { Link, href } from "react-router";

<IconButton appearance="outlined" asChild label="prestige worldwide" icon={<GlobeIcon />}>
	<Link to={href("/base/colors")} />
</IconButton>

API Reference

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

Prop	Type	Default	Description
appearance	ghost outlined	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.
label	string	—	The accessible label for the icon. This label will be visually hidden but announced to screen reader users, similar to alt text for img tags.
isLoading	boolean	false	Determines whether or not the icon button is in a loading state, default `false`. Setting `isLoading` will replace the icon with a spinner. It will also disable user interaction with the button and set `aria-disabled`.
size	xs sm md	md	The size of the `IconButton`.
type	button reset submit	—	The default behavior of the `IconButton`. 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.