Sanity UI
Docs
Arcade
  1. Docs
  2. Primitives
  3. Button

<Button />

The Button component.

Properties  

as?: React.ElementType | keyof JSX.IntrinsicElements
fontSize?: number | number[]
mode?: 'default' | 'ghost' | 'bleed'
icon?: React.ComponentType | React.ReactNode
iconRight?: React.ComponentType | React.ReactNode
justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'
padding?: number | number[]
paddingX?: number | number[]
paddingY?: number | number[]
paddingTop?: number | number[]
paddingRight?: number | number[]
paddingBottom?: number | number[]
paddingLeft?: number | number[]
radius?: (number | 'full') | (number | 'full')[]
selected?: boolean
space?: number | number[]
text?: React.ReactNode
tone?: 'default' | 'primary' | 'positive' | 'caution' | 'critical'
type?: 'button' | 'reset' | 'submit'
width?: 'fill'

Accessibility considerations  

All buttons need an “accessible name”, which is the name that screenreaders, voice control software and other assissistive technologies use to refer to this specific button (and distinguish it from others).
If there's text in your button, that usually becomes the accessible name. When you use <Button> with just an icon and no text, always add your accessible name manually. One method to do that is to use the aria-label attribute.
For example, this would be a button that is visually just a “plus” icon, but has an accessible name of “Add content”:
 <Button
    fontSize={[2, 2, 3]}
    icon={AddIcon}
    mode="ghost"
    padding={[3, 3, 4]}
    aria-label="Add content"
/>
How accessible names are calculated exactly: Accessible Name and Description Computation 1.1.

Made withby folks at