funkwhale/front/ui-docs/components/ui/button.md

Button

Buttons are UI elements that users can interact with to perform actions. Funkwhale uses buttons in many contexts.

{
  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<void>

  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.

Default

<Button>
  Default button
</Button>

Default button

Primary

The primary button represents the single positive action on a page or modal, such as uploading, confirming, and accepting changes.

<Button primary>
  Primary button
</Button>

Primary button

Secondary

Secondary buttons represent neutral actions such as cancelling a change or dismissing a notification.

<Button secondary raised>
  Secondary button
</Button>

Secondary button

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.

<Button destructive>
  Destructive button
</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. :::

<Button>
  Filled button
</Button>

<Button solid>
  Also filled button
</Button>

Filled button Also filled button

Outline

Outline buttons have a transparent background. Use these to deemphasize the action the button performs.

<Button outline secondary>
  Outline button
</Button>

Outline button

Ghost

Ghost buttons have a transparent background and border. Use these to deemphasize the action the button performs.

<Button ghost secondary>
  Ghost button
</Button>

Ghost button

Button styles

Shadow

You can give a button a shadow to add depth.

<Button shadow>
  Shadow button
</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. :::

<Button>
  Normal button
</Button>

Normal button

Round

Round buttons have fully rounded edges.

<Button round>
  Round button
</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)

<Button aria-pressed>
  Active button
</Button>

Default:

Inactive button Active button

---

Secondary:

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.

<Button disabled>
  Disabled button
</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.

<Button is-loading>
  Loading button
</Button>

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 <Button> component. Make sure the @click handler never rejects. :::

<script setup lang="ts">
const click = () => new Promise((resolve) => setTimeout(resolve, 1000));
</script>

<template>
  <Button @click="click"> Click me </Button>
</template>

<Button @click="click"> Click me

You can override the promise state by passing a false is-loading prop.

<Button :is-loading="false">
  Click me
</Button>

Click me

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 width=standard :::

<Button icon="bi-three-dots-vertical" />
<Button round icon="bi-x large" />
<Button primary icon="bi-save" buttonWidth/>
<Button destructive icon="bi-trash">
  Delete
</Button>

Delete

Width and alignment

    <Button min-content>·</Button>
    <Button small>·</Button>
    <Button buttonWidth>·</Button>
    <Button medium>·</Button>
    <Button auto>·</Button>

    <hr />

    <Button alignSelf="start">·</Button>
    <Button alignSelf="center">·</Button>
    <Button alignSelf="end">·</Button>

    <hr />

    <Button alignText="left">·</Button>
    <Button alignText="center">·</Button>
    <Button alignText="right">·</Button>

🐌 🐌 🐌 🐌 🐌

---

🐌 🐌 🐌

---

🐌 🐌 🐌