---
url: /docs/components/button/frameworks/react.md
---
# Button - React
Buttons initiate events or actions within a page, informing users of what to expect next.
## React
### Import
You can import the component like so:
```js
import { Button } from '@warp-ds/react';
```
or import it individually to optimize your JS bundle size by adding only the components you need:
```js
import { Button } from '@warp-ds/react/components/button';
```
### Syntax
```jsx example
```
### 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.
```jsx example
```
#### Negative
Used for destructive actions, like deletion. Shouldn't be used on the same
screen as a primary button.
```jsx example
```
#### 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.
```jsx example