---
title: "Icon Button"
description: "A square button containing only an icon. Requires `label` for accessibility. Renders an `<a>` when given an `href` and a `<button>` otherwise."
canonical_url: "https://sanity-id-docs.sanity.build/sanity-id/components/icon-button"
md_url: "https://sanity-id-docs.sanity.build/sanity-id/components/icon-button.md"
docs_index: "https://sanity-id-docs.sanity.build/sanity-id/llms.txt"
version: "1.15.2"
---

> Part of the Sanity ID reference. The index of every page is at https://sanity-id-docs.sanity.build/sanity-id/llms.txt.

# Icon Button

A square button containing only an icon. Requires `label` for accessibility. Renders an `<a>` when given an `href` and a `<button>` otherwise.

```tsx
import { IconButton } from "@sanity/sanity-id/components/icon-button"
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `icon` | `IconSymbol \| ReactElement` | yes | — | Icon to display inside the button |
| `label` | `string` | yes | — | Accessible label used as aria-label |
| `as` | `E` | no | `props.href ? "a" : "button"` | Element or component to render as |
| `mode` | `"primary" \| "brand" \| "accent" \| "muted" \| "outline" \| "ghost"` | no | `"primary"` | Visual style of the button |
| `size` | `"sm" \| "md" \| "lg"` | no | `"md"` | Size of the button |

Also accepts every prop of `Omit<ComponentProps<E>, "as" | "children">`.

## Usage

```tsx
import { IconButton } from "@sanity/sanity-id/components/icon-button"
import * as React from "react"

export default () => {
	const modes = ["primary", "brand", "accent", "muted", "outline", "ghost"]
	const sizes = ["lg", "md", "sm"]
	return (
		<div className="grid gap-y-16 gap-x-32 grid-cols-[repeat(3,max-content)] items-center">
			{modes.map((mode) => (
				<React.Fragment key={mode}>
					{sizes.map((size) => (
						<React.Fragment key={mode + size}>
							<IconButton
								mode={mode}
								size={size}
								label={`Button ${mode} ${size}`}
								icon="component"
								href="#icon-button"
							/>
						</React.Fragment>
					))}
				</React.Fragment>
			))}
		</div>
	)
}
```