Button

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

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

Props

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

Button props
PropTypeDescription
asE

Element or component to render as

default value: props.href ? "a" : "button"

iconLeftIconSymbol | ReactElement

Icon displayed on the left side

iconRightIconSymbol | ReactElement

Icon displayed on the right side

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"

Usage

ButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButton
1import { Button } from "@sanity/sanity-id/components/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(2,max-content)] @min-3xl:grid-cols-[repeat(4,max-content)]">
9            {modes.map((mode) => (
10              <React.Fragment key={mode}>
11                {sizes.map((size) => (
12                  <React.Fragment key={mode + size}>
13                    <Button mode={mode} size={size} href="#button">Button</Button>
14                    <Button mode={mode} size={size} iconLeft="component" iconRight="component" href="#button">Button</Button>
15                    <Button mode={mode} size={size} iconLeft="component" href="#button">Button</Button>
16                    <Button mode={mode} size={size} iconRight="component" href="#button">Button</Button>
17                  </React.Fragment>
18                ))}
19              </React.Fragment>
20            ))}
21          </div>
22        )
23      }