Button
A clickable button element. You can style it according to the Square design guidelines, with variants such as "primary", "secondary", or "tertiary", and sizes ranging from "small" to "large".
You can use this component as a <button> element, or as an <a> anchor element to navigate the user elsewhere.
Component render
<Button onClick={() => console.log("clicked!")} rank="primary">
Primary button
</Button>
With slotted icon component
<Button onClick={() => console.log("clicked!")} rank="primary">
<Accessory slot="icon">
<Icon variant="x" />
</Accessory>
</Button>
Properties
| Property | Type | Description |
|---|---|---|
disabled | boolean | Functionally and visually disables the button. |
download | string | Causes the browser to treat the linked URL as a download. Only works for same-origin URLs. Only applies when an href is provided. See here for details on accepted values. |
href | string | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. |
isLoading | boolean | Whether or not the button is in a loading state. |
onClick | () => void | A callback that runs whenever the element is clicked. |
rank | "primary" "secondary" "tertiary" | String for setting button rank. |
rel | string | Defines the relationship between a linked resource and the current document. Only applies when an href is provided. See here for details on accepted values. |
size | "small" "medium" "large" | String for setting button size. |
target | "_blank" "_self" "_parent" "_top" | Specifies where to display the linked URL. Only applies when an href is provided. See here for details on accepted values. |
type | "button" "reset" "submit" | String for setting button type. |
variant | "regular" "destructive" | String for setting button variant. |