---
title: "Button"
description: "The primary call to action. Renders an `<a>` when given an `href` and a `<button>` otherwise; pass `as` to render a framework link."
canonical_url: "https://sanity-id-docs.sanity.build/sanity-id/components/button"
md_url: "https://sanity-id-docs.sanity.build/sanity-id/components/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.

# Button

The primary call to action. Renders an `<a>` when given an `href` and a `<button>` otherwise; pass `as` to render a framework link.

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

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `as` | `E` | no | `props.href ? "a" : "button"` | Element or component to render as |
| `iconLeft` | `IconSymbol \| ReactElement` | no | — | Icon displayed on the left side |
| `iconRight` | `IconSymbol \| ReactElement` | no | — | Icon displayed on the right side |
| `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">`.

## Usage

```tsx
import { Button } from "@sanity/sanity-id/components/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(2,max-content)] @min-3xl:grid-cols-[repeat(4,max-content)]">
			{modes.map((mode) => (
				<React.Fragment key={mode}>
					{sizes.map((size) => (
						<React.Fragment key={mode + size}>
							<Button mode={mode} size={size} href="#button">Button</Button>
							<Button mode={mode} size={size} iconLeft="component" iconRight="component" href="#button">Button</Button>
							<Button mode={mode} size={size} iconLeft="component" href="#button">Button</Button>
							<Button mode={mode} size={size} iconRight="component" href="#button">Button</Button>
						</React.Fragment>
					))}
				</React.Fragment>
			))}
		</div>
	)
}
```