---
description: Button Component
---

# Button

## Usage

```jsx
...
import { Button } from "@wigxel/react-components/lib/buttons";


const Login = () => {
    
    return (
        <form>
            ...
            
            <Button primary outline type="text">
                Login
            </Button>
        </form>
    )
}
```

The above `Button` components has the  `primary` prop will set the background color of the button to the primary color specified in the [`Theme.js`](../../master#adding-theme-variables) file.  When combined with the `outline` prop, We will get a primary colored border and a transparent background.&#x20;

## Button Props

```jsx
<Button
    primary={true}
    danger={true}
    warning={true}
    outline={true}
    large={true}
    fullwidth={true}
    style={...}
    />
```

{% hint style="info" %}
You can only use one of these 3 props (`primary`, `danger`, `warning`) for a Button component. When none of the color properties are specified the Button defaults to the accent color from the [_Theme.js_ ](../../master#adding-theme-variables) file
{% endhint %}

