# Vue Button - Flowbite
#### Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows
---
:::tip
Original reference: [https://flowbite.com/docs/components/buttons/](https://flowbite.com/docs/components/buttons/)
:::
The button component is probably the most widely used element in any user interface or website as it can be used to launch an action but also to link to other pages.
Flowbite provides a large variety of styles and sizes for the button component including outlined buttons, multiple colors, sizes, buttons with icons, and more.
## Prop - color
```vue
DefaultAlternativeDarkLightGreenRedYellowPurplePink
````
## Prop - size
```vue
Extra Small - xsSmall - smMedium - mdLarge - lgExtra Large - xl
````
## Prop - pill
```vue
DefaultAlternativeDarkLightGreenRedYellowPurple
````
## Prop - gradient (monochrome)
```vue
BlueCyanGreenLimePinkPurpleRedTeal
````
## Prop - gradient (duotone)
```vue
Purple to blueCyan to blueGreen to bluePurple to pinkPink to orangeTeal to limeRed to yellow
````
## Prop - outline
```vue
DefaultDarkGreenRedYellowPurple
````
## Prop - outline (gradient)
```vue
Purple to blueCyan to blueGreen to bluePurple to pinkPink to orangeTeal to limeRed to yellow
````
## Prop - shadow
```vue
Blue with blueCyan with cyanGreen with greenLime with limePink with pinkPurple with purpleRed with redTeal with tealBlue with redCyan with tealTeal with purple
````
## Prop - square
```vue
````
## Prop - loading
```vue
Click me
Click me
Click me
Click me
Click me
````
## Prop - disabled
```vue
DefaultDefault outlineRed gradientRed to yellow gradientRed to yellow outline
````
## Prop - href
You can add a link to a `Button` component.
Additionally you can add `tag` prop to change button component to `router-link`
```vue
Google.comQuickstart
````
## Slot - default
```vue
Close something
Open something
````
## Slot - prefix
```vue
Buy
````
## Slot - suffix
```vue
Choose plan
```
## Button API
### Props
| Name | Type | Values | Default |
|------------------|---------|------------------------------------------------------------------------------------------------|-----------|
| color | String | `default`, `alternative`, `dark`, `light`, `green`, `red`, `yellow`, `purple`, `pink`, `blue` | `default` |
| disabled | Boolean | | `false` |
| gradient | String | monochrome: `blue`, `green`, `cyan`, `teal`, `lime`, `red`, `pink`, `purple` duotone: `purple-blue`, `cyan-blue`, `green-blue`, `purple-pink`, `pink-orange`, `teal-lime`, `red-yellow` | `null` |
| href | String | | `''` |
| loading | Boolean | | `false` |
| loading-position | String | `prefix`, `suffix` | `prefix` |
| outline | Boolean | | `false` |
| pill | Boolean | | `false` |
| shadow | String | `blue`, `green`, `cyan`, `teal`, `lime`, `red`, `pink`, `purple` | `null` |
| size | String | `xs`, `sm`, `md`, `lg`, `xl` | `md` |
| square | Boolean | | `false` |
| tag | String | | `a` |
```