0.16.1

Theme Switcher

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 { Fire } from "@phosphor-icons/react";

} />
} />

} />
} />

} />
} />

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 { Fire } from "@phosphor-icons/react";

} />
} />

} />
} />

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

}>
	

API Reference

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

PropTypeDefaultDescription

appearance

  • ghost
  • outlined
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.

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

booleanfalse

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.