Button
Buttons initiate events or actions within a page, informing users of what to expect next.
Example
Usage
Design Guidelines
See Figma: Warp - Components / Button
Accessibility
If the button doesn't have visible text content, such as when used with only an icon, an aria-label prop must be provided for accessibility.
Framework(s)
📣 Beta
New and ready to use. Feel free to start using it and let us know if you run into any issues.
If you encounter bugs or other issues, please report it to the WARP team: #warp-design-system.
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 | notes |
|---|---|---|---|
children | ReactNode | The contents of the Button |
Optional Props
| name | type | default | notes |
|---|---|---|---|
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