# Vue Button Component - 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
```typescript
type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue'
defineProps({
color: {
type: String as PropType,
default: 'default',
},
})
```
```vue
```
## Prop - size
```typescript
type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
defineProps({
size: {
type: String as PropType,
default: 'md',
},
})
```
```vue
```
## Prop - pill
```typescript
defineProps({
pill: {
type: Boolean,
default: false,
},
})
```
```vue
```
## Prop - gradient (monochrome)
```typescript
type ButtonMonochromeGradient = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple'
type ButtonDuotoneGradient = 'purple-blue' | 'cyan-blue' | 'green-blue' | 'purple-pink' | 'pink-orange' | 'teal-lime' | 'red-yellow'
type ButtonGradient = ButtonDuotoneGradient | ButtonMonochromeGradient
defineProps({
gradient: {
type: [String, null] as PropType,
default: null,
},
})
```
```vue
```
## Prop - gradient (duotone)
```vue
```
## Prop - outline (color)
```typescript
defineProps({
outline: {
type: Boolean,
default: false,
},
})
```
```vue
```
## Prop - outline (gradient)
```vue
```
## Prop - shadow
```typescript
type ButtonMonochromeGradient = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple'
defineProps({
shadow: {
type: [String, null] as PropType,
default: null,
},
})
```
```vue
```
## Prop - square
```typescript
defineProps({
square: {
type: Boolean,
default: false,
},
})
```
```vue
```
## Prop - loading
```typescript
defineProps({
loading: {
type: Boolean,
default: false,
},
loadingPosition: {
type: String as PropType<'suffix' | 'prefix'>,
default: 'prefix',
},
})
```
```vue
```
## Prop - disabled
```typescript
defineProps({
disabled: {
type: Boolean,
default: false,
},
})
```
```vue
```
## Slot - default
```vue
```
## Slot - prefix
```vue
```
## Slot - suffix
```vue
```