Skip to content
Snippets Groups Projects

feat: add more props to buttons

Merged Kasper Seweryn requested to merge wvffle/add-ghost-variant into main
5 files
+ 96
43
Compare changes
  • Side-by-side
  • Inline
Files
5
@@ -6,17 +6,17 @@ const click = () => new Promise(resolve => setTimeout(resolve, 1000))
@@ -6,17 +6,17 @@ const click = () => new Promise(resolve => setTimeout(resolve, 1000))
Buttons are UI elements that users can interact with to perform actions. Funkwhale uses buttons in many contexts.
Buttons are UI elements that users can interact with to perform actions. Funkwhale uses buttons in many contexts.
| Prop | Data type | Required? | Default | Description |
| Prop | Data type | Required? | Default | Description |
| ------------- | ----------------------------------------- | --------- | --------- | -------------------------------------------------- |
| ------------- | ----------------------------------------- | --------- | --------- | ------------------------------------------------------------------ |
| `outline` | Boolean | No | `false` | Whether to render the button as an outline button. |
| `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 |
| `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 |
| `round` | Boolean | No | `false` | Whether to render the button as a round button |
| `icon` | String | No | | The icon attached to the button |
| `icon` | String | No | | The icon attached to the button |
| `is-active` | Boolean | No | `false` | Whether the button is in an active state |
| `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 |
| `is-loading` | Boolean | No | `false` | Whether the button is in a loading state |
| `color` | `primary` \| `secondary` \| `destructive` | No | `primary` | Renders a colored button |
| `color` | `primary` \| `secondary` \| `destructive` | No | `primary` | Renders a colored button |
## Button types
## Button colors
Buttons come in different types depending on the type of action they represent.
Buttons come in different types depending on the type of action they represent.
@@ -66,16 +66,16 @@ Desctrutive buttons represent **dangerous** actions including deleting items or
@@ -66,16 +66,16 @@ Desctrutive buttons represent **dangerous** actions including deleting items or
Destructive button
Destructive button
</fw-button>
</fw-button>
## Button styles
## Button variants
Buttons come in different styles that you can use depending on the location of the button.
Buttons come in different styles that you can use depending on the location of the button.
### Filled
### Solid
Filled buttons have a solid background. Use these to emphasize the action the button performs.
Solid buttons have a filled background. Use these to emphasize the action the button performs.
::: info
::: info
This is the default style. If you don't specify a style, a filled button is rendered.
This is the default style. If you don't specify a style, a solid button is rendered.
:::
:::
```vue-html
```vue-html
@@ -93,15 +93,31 @@ This is the default style. If you don't specify a style, a filled button is rend
@@ -93,15 +93,31 @@ This is the default style. If you don't specify a style, a filled button is rend
Outline buttons have a transparent background. Use these to deemphasize the action the button performs.
Outline buttons have a transparent background. Use these to deemphasize the action the button performs.
```vue-html
```vue-html
<fw-button outline color="secondary">
<fw-button variant="outline" color="secondary">
Outline button
Outline button
</fw-button>
</fw-button>
```
```
<fw-button outline color="secondary">
<fw-button variant="outline" color="secondary">
Outline button
Outline button
</fw-button>
</fw-button>
 
### Ghost
 
 
Ghost buttons have a transparent background and border. Use these to deemphasize the action the button performs.
 
 
```vue-html
 
<fw-button variant="ghost" color="secondary">
 
Ghost button
 
</fw-button>
 
```
 
 
<fw-button variant="ghost" color="secondary">
 
Ghost button
 
</fw-button>
 
 
## Button styles
 
### Shadow
### Shadow
You can give a button a shadow to add depth.
You can give a button a shadow to add depth.
Loading