# 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 | | ------------ | ----------------------------------------- | --------- | --------- | ------------------------------------------------------------------ | | `variant` | `solid` \| `outline` \| `ghost` | No | `solid` | Whether to render the button as an solid, outline or ghost button. | | `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 | | `is-active` | Boolean | No | `false` | Whether the button is in an active state | | `is-loading` | Boolean | No | `false` | Whether the button is in a loading state | | `color` | `primary` \| `secondary` \| `destructive` | No | `primary` | Renders a colored button | ## Button colors Buttons come in different types depending on the type of action they represent. ### Primary Primary buttons represent **positive** actions such as uploading, confirming, and accepting changes. ::: info This is the default type. If you don't specify a type, a primary button is rendered. ::: ```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 ``` 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 A button is active when clicked by a user. You can force an active state by passing an `is-active` prop. ```vue-html Active 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 ` ` into the slot. ::: ```vue-html   Delete ```   Delete