Appearance
Button #
Buttons are UI elements that users can interact with to perform actions. Funkwhale uses buttons in many contexts.
| Prop | Data type | Required? | Description |
|---|---|---|---|
outline | Boolean | No | Whether to render the button as an outline button. |
shadow | Boolean | No | Whether to render the button with a shadow |
round | Boolean | No | Whether to render the button as a round button |
icon | String | No | The icon attached to the button |
is-active | Boolean | No | Whether the button is in an active state |
is-loading | Boolean | No | Whether the button is in a loading state |
primary | Boolean | No | Renders a primary button |
secondary | Boolean | No | Renders a secondary button |
destructive | Boolean | No | Renders a destructive button |
Button types #
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.
template
<fw-button>
Primary button
</fw-button>
Secondary #
Secondary buttons represent neutral actions such as cancelling a change or dismissing a notification.
template
<fw-button secondary>
Secondary button
</fw-button>
Destructive #
Desctrutive buttons represent dangerous actions including deleting items or purging domain information.
template
<fw-button destructive>
Destructive button
</fw-button>
Button styles #
Buttons come in different styles that you can use depending on the location of the button.
Filled #
Filled buttons have a solid background. Use these to emphasize the action the button performs.
INFO
This is the default style. If you don't specify a style, a filled button is rendered.
template
<fw-button>
Filled button
</fw-button>
Outline #
Outline buttons have a transparent background. Use these to deemphasize the action the button performs.
template
<fw-button outline>
Outline button
</fw-button>
Shadow #
You can give a button a shadow to add depth.
template
<fw-button shadow>
Shadow button
</fw-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.
template
<fw-button>
Normal button
</fw-button>
Round #
Round buttons have fully rounded edges.
template
<fw-button round>
Round button
</fw-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.
template
<fw-button is-active>
Active button
</fw-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.
template
<fw-button disabled>
Disabled button
</fw-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.
template
<fw-button is-loading>
Loading button
</fw-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 <fw-button> component. Make sure the @click handler never rejects.
vue
<script setup lang="ts">
const click = () => new Promise((resolve) => setTimeout(resolve, 1000));
</script>
<template>
<fw-button @click="click"> Click me </fw-button>
</template>
You can override the promise state by passing a false is-loading prop.
template
<fw-button :is-loading="false">
Click me
</fw-button>
Icons #
You can use Bootstrap Icons 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.
template
<fw-button secondary icon="bi-three-dots-vertical" />
<fw-button secondary is-round icon="bi-x" />
<fw-button icon="bi-save"> </fw-button>
<fw-button destructive icon="bi-trash">
Delete
</fw-button>