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
1import { IconButton } from "@ngrok/mantle/button";2import { GlobeIcon } from "@phosphor-icons/react/Globe";3 4<IconButton appearance="ghost" label="prestige worldwide" size="xs" icon={<GlobeIcon />} />5<IconButton appearance="outlined" label="prestige worldwide" size="xs" icon={<GlobeIcon />} />6 7<IconButton appearance="ghost" label="prestige worldwide" size="sm" icon={<GlobeIcon />} />8<IconButton appearance="outlined" label="prestige worldwide" size="sm" icon={<GlobeIcon />} />9 10<IconButton appearance="ghost" label="prestige worldwide" size="md" icon={<GlobeIcon />} />11<IconButton appearance="outlined" label="prestige worldwide" size="md" icon={<GlobeIcon />} />Like Button, IconButton defaults to type="button" rather than the native submit, so it never accidentally submits a surrounding <form>. Opt in with type="submit" (or type="reset") when the button should submit or reset a form. When asChild is used, type has no effect and is not forwarded to the child.
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
1import { IconButton } from "@ngrok/mantle/button";2import { GlobeIcon } from "@phosphor-icons/react/Globe";3 4<IconButton appearance="ghost" label="prestige worldwide" icon={<GlobeIcon />} />5<IconButton appearance="outlined" label="prestige worldwide" icon={<GlobeIcon />} />6 7<IconButton appearance="ghost" label="prestige worldwide" isLoading icon={<GlobeIcon />} />8<IconButton appearance="outlined" label="prestige worldwide" isLoading icon={<GlobeIcon />} />When you want to render something else as an 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.
1import { IconButton } from "@ngrok/mantle/button";2import { GlobeIcon } from "@phosphor-icons/react/Globe";3import { Link, href } from "react-router";4 5<IconButton appearance="outlined" asChild label="prestige worldwide" icon={<GlobeIcon />}>6 <Link to={href("/base/colors")} />7</IconButton>;The IconButton accepts the following props in addition to the standard HTML button attributes.