# Button
Buttons are UI elements that users can interact with to perform actions. Funkwhale uses buttons in many contexts.
```ts
{
alignText?: 'left' | 'center' | 'right'
alignSelf?: 'start' | 'center' | 'end'
thin?: true
isActive?: boolean
isLoading?: boolean
shadow?: boolean
round?: boolean
icon?: string
onClick?: (...args: any[]) => void | Promise
autofocus? : boolean
ariaPressed? : true
} & (ColorProps | DefaultProps)
& VariantProps
& RaisedProps
& WidthProps
```
## Button colors
Buttons come in different types depending on the type of action they represent.
Find [a complete overview of recommended styles on the color page](../../using-color#links-and-buttons).
### Default
```vue-html
```
### Primary
The primary button represents the **single positive** action on a page or modal, such as uploading, confirming, and accepting changes.
```vue-html
```
### Secondary
Secondary buttons represent **neutral** actions such as cancelling a change or dismissing a notification.
```vue-html
```
Note that on a secondary background, the button needs to be `raised` to make it stand out.
### Destructive
Desctrutive buttons represent **dangerous** actions including deleting items or purging domain information.
```vue-html
```
## Button variants
Buttons come in different styles that you can use depending on the location of the button.
### Solid
Solid buttons have a filled background. Use these to emphasize the action the button performs.
::: info
This is the default style. If you don't specify a style, a solid button is rendered.
:::
```vue-html
```
### Outline
Outline buttons have a transparent background. Use these to deemphasize the action the button performs.
```vue-html
```
### Ghost
Ghost buttons have a transparent background and border. Use these to deemphasize the action the button performs.
```vue-html
```
## Button styles
### Shadow
You can give a button a shadow to add depth.
```vue-html
```
## Button shapes
You can choose different shapes for buttons depending on their location and use.
### Normal
Normal buttons are slightly rounded rectangles.
::: info
This is the default shape. If you don't specify a type, a normal button is rendered.
:::
```vue-html
```
### Round
Round buttons have fully rounded edges.
```vue-html
```
## Button states
You can pass a state to indicate whether a user can interact with a button.
### Active
You can force an active state by passing an `aria-pressed` prop.
This can be useful for toggle buttons (if you don't want to use a [ToggleΒ component](toggle))
```vue-html
```
**Default:**
---
**Secondary:**
---
**Primary:**
### Disabled
Disabled buttons are non-interactive and inherit a less bold color than the one provided. You can apply a disabled state by passing a `disabled` prop.
```vue-html
```
### Loading
If a user can't interact with a button until something has finished loading, you can add a spinner by passing the `is-loading` prop.
```vue-html
```
### Promise handling in `@click`
When a function passed to `@click` returns a promise, the button automatically toggles a loading state on click. When the promise resolves or is rejected, the loading state turns off.
::: danger
There is no promise rejection mechanism implemented in the `