# Button
reference: [https://flowbite.com/docs/components/buttons/](https://flowbite.com/docs/components/buttons/)
## 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
```