Button - React 19 ​
Buttons initiate events or actions within a page, informing users of what to expect next.
React 19 ​
Import ​
You can import the component like so:
import { Button } from '@warp-ds/components/react/button';Syntax ​
<Button>Default</Button>Visual options ​
Primary ​
The primary button is a call to action. As a general rule, there should only be one of them on the screen. This guides the user towards the happy path.
<Button variant="primary">Primary</Button>Negative ​
Used for destructive actions, like deletion. Shouldn't be used on the same screen as a primary button.
<Button variant="negative">Negative</Button>Secondary ​
Secondary buttons are without background, and are often used for secondary actions. This is the default, so you may simply omit the secondary property unless you want to use it with quiet variation.
<Button variant="secondary">Secondary</Button>Utility ​
The utility button.
<Button variant="utility">Utility</Button>Link ​
Button to look like a link, use the link property.
<Button variant="link">button</Button>Negative Quiet ​
The negativeQuiet button.
<Button variant="negativeQuiet">Negative-Quiet</Button>Utility Quiet ​
The utilityQuiet button.
<Button variant="utilityQuiet">utility-Quiet</Button>Loading/In progress ​
Used for visual feedback that the action the user triggered is loading.
<Button loading>Default loading</Button>Small ​
<Button size="small">Default small</Button>Full width ​
The fullWidth prop sets the button's width to its parent's width.
<Button fullWidth>Full width</Button>Props ​
Required props ​
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | The contents of the Button |
Optional Props ​
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | Additional classes to include | |
| style | CSSProperties | CSS styles to inline on the component | |
| type | "button"|"submit"|"reset" | button | Button type, only applied when href is not set. |
| variant | 'primary' | 'secondary' | 'negative' | 'utility' | 'overlay' | 'overlayInverted' |'quiet'| 'negativeQuiet' | 'utilityQuiet'| 'overlayQuiet' | 'overlayInvertedQuiet' | 'link' | Set the correct variant on the button. | |
| size | 'small' | 'default' | default | Set the button to be either small or default size. |
| loading | boolean | false | Set the button to look like it is in progress, can be combined with other button types. Can be combined with any button type. |
| fullWidth | boolean | false | Sets the button's width to its parent's width. Useful especially on mobile when button should take full width. |
| hasIconOnly | boolean | Facilitate a round button for icon. |
Questions? ​
Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system