Icon Button
A square button containing only an icon. Requires `label` for accessibility. Renders an `<a>` when given an `href` and a `<button>` otherwise.
import { IconButton } from "@sanity/sanity-id/components/icon-button"Props
Also accepts every prop of Omit<ComponentProps<E>, "as" | "children">.
| Prop | Type | Description |
|---|---|---|
icon (required) | IconSymbol | ReactElement | Icon to display inside the button |
label (required) | string | Accessible label used as aria-label |
as | E | Element or component to render as default value: props.href ? "a" : "button" |
mode | "primary" | "brand" | "accent" | "muted" | "outline" | "ghost" | Visual style of the button default value: "primary" |
size | "sm" | "md" | "lg" | Size of the button default value: "md" |
Required.
Usage
1import { IconButton } from "@sanity/sanity-id/components/icon-button"
2import * as React from "react"
3
4export default () => {
5 const modes = ["primary", "brand", "accent", "muted", "outline", "ghost"]
6 const sizes = ["lg", "md", "sm"]
7 return (
8 <div className="grid gap-y-16 gap-x-32 grid-cols-[repeat(3,max-content)] items-center">
9 {modes.map((mode) => (
10 <React.Fragment key={mode}>
11 {sizes.map((size) => (
12 <React.Fragment key={mode + size}>
13 <IconButton
14 mode={mode}
15 size={size}
16 label={`Button ${mode} ${size}`}
17 icon="component"
18 href="#icon-button"
19 />
20 </React.Fragment>
21 ))}
22 </React.Fragment>
23 ))}
24 </div>
25 )
26 }