# Button Buttons are UI elements that users can interact with to perform actions. Funkwhale uses buttons in many contexts. | Prop | Data type | Required? | Default | Description | | -------------- | --------- | --------- | ------- | ---------------------------------------------- | | `shadow` | Boolean | No | `false` | Whether to render the button with a shadow | | `round` | Boolean | No | `false` | Whether to render the button as a round button | | `icon` | String | No | | The icon attached to the button | | `aria-pressed` | Boolean | No | `false` | Whether the button is in an active state | | `is-loading` | Boolean | No | `false` | Whether the button is in a loading state | In addition, use [Colors] and [Variants] ## 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 Default button ``` Default button ### Primary Primary buttons represent **positive** actions such as uploading, confirming, and accepting changes. ```vue-html Primary button ``` Primary button ### Secondary Secondary buttons represent **neutral** actions such as cancelling a change or dismissing a notification. ```vue-html Secondary button ``` Secondary button ### Destructive Desctrutive buttons represent **dangerous** actions including deleting items or purging domain information. ```vue-html Destructive button ``` Destructive button ## 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 Filled button Also filled button ``` Filled button Also filled button ### Outline Outline buttons have a transparent background. Use these to deemphasize the action the button performs. ```vue-html Outline button ``` Outline button ### Ghost Ghost buttons have a transparent background and border. Use these to deemphasize the action the button performs. ```vue-html Ghost button ``` Ghost button ## Button styles ### Shadow You can give a button a shadow to add depth. ```vue-html Shadow button ``` Shadow button ## 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 Normal button ``` Normal button ### Round Round buttons have fully rounded edges. ```vue-html Round button ``` Round button ## 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 Active button ``` **Secondary (default):** Inactive button Active button --- **Primary:** Inactive button Active button ### 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 Disabled button ``` Disabled button ### 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 Loading button ``` Loading button ### 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 `` component. Make sure the `@click` handler never rejects. ::: ```vue ``` Click me You can override the promise state by passing a false `is-loading` prop. ```vue-html Click me ``` Click me ## Icons You can use [Bootstrap Icons](https://icons.getbootstrap.com/) in your button component ::: info Icon buttons shrink down to the icon size if you don't pass any content. If you want to keep the button at full width with just an icon, add `width=standard` ::: ```vue-html Delete ``` Delete ## Width and alignment ```vue-html · · ·

---

· · ·

---

· · · ``` · · ·

---

· · ·

---

· · · (Text to stretch the column)