MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(ui): document default color choice for buttons

This commit is contained in:
upsiflu 2024-12-18 16:58:27 +01:00
parent ae384cbd46
commit 50edbf0cfa
1 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
front/ui-docs/components/ui/button.md
View File

@ -1,6 +1,7 @@
<script setup> <script setup>
import Button from '~/components/ui/Button.vue' import Button from '~/components/ui/Button.vue'
import Layout from '~/components/ui/Layout.vue' import Layout from '~/components/ui/Layout.vue'
import { color } from '~/composables/colors.ts';
const click = () => new Promise(resolve => setTimeout(resolve, 1000)) const click = () => new Promise(resolve => setTimeout(resolve, 1000))
</script> </script>
@ -23,14 +24,30 @@ In addition, use [Colors] and [Variants]
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.
Find [a complete overview of recommended styles on the color page](../../using-color#links-and-buttons).
### Default
<Layout flex>
```vue-html
<Button>
Default button
</Button>
```
<Layout class="preview">
<Button>
Default button
</Button>
</Layout>
</Layout>
### Primary ### Primary
Primary buttons represent **positive** actions such as uploading, confirming, and accepting changes. 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 ```vue-html
<Button primary> <Button primary>
Primary button Primary button