feat: add more props to buttons

docs/components/button/basic.md

@@ -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.
 
-| Prop          | Data type                                 | Required? | Default   | Description                                        |
-| ------------- | ----------------------------------------- | --------- | --------- | -------------------------------------------------- |
-| `outline`     | Boolean                                   | No        | `false`   | Whether to render the button as an outline 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 types
+| 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.
 
@@ -66,16 +66,16 @@ Desctrutive buttons represent **dangerous** actions including deleting items or
   Destructive button
 </fw-button>
 
-## Button styles
+## Button variants
 
 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
-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
@@ -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.
 
 ```vue-html
-<fw-button outline color="secondary">
+<fw-button variant="outline" color="secondary">
   Outline button
 </fw-button>
 ```
 
-<fw-button outline color="secondary">
+<fw-button variant="outline" color="secondary">
   Outline 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
 
 You can give a button a shadow to add depth.