Skip to content

Commit 1ce801e

Browse files
lepturelepture
committed
docs: update button examples
1 parent a609c54 commit 1ce801e

File tree

10 files changed

+152
-3
lines changed

10 files changed

+152
-3
lines changed

‎docs/.vitepress/components/Example.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,12 @@ const expanded = ref(false)
3636
.vp-Example {
3737
margin-top: var(--space-4);
3838
margin-bottom: var(--space-6);
39-
border: 1px solid var(--gray-a4);
39+
border: 1px solid var(--gray-a5);
4040
border-radius: var(--radius-4);
4141
overflow: hidden;
4242
}
4343
.vp-ExampleComponent {
44-
border-bottom: 1px solid var(--gray-a4);
44+
border-bottom: 1px solid var(--gray-a5);
4545
width: 100%;
4646
box-sizing: border-box;
4747
}
@@ -97,7 +97,7 @@ const expanded = ref(false)
9797
.vp-ExampleAction {
9898
width: 100%;
9999
font-size: 13px;
100-
border-top: 1px solid var(--gray-a4);
100+
border-top: 1px solid var(--gray-a5);
101101
background: var(--gray-2);
102102
color: var(--gray-11);
103103
padding: var(--space-1);

‎docs/.vitepress/config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ export default defineConfig({
2626
},
2727
themeConfig: {
2828
// https://vitepress.dev/reference/default-theme-config
29+
outline: [2, 3],
30+
2931
nav: [
3032
{ text: 'Home', link: '/' },
3133
{ text: 'Components', link: '/components/button' }

‎docs/content/components/button.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ title: Button
33
description: Trigger an action or event, such as submitting a form or displaying a dialog.
44
---
55

6+
<Example name="button/Overview.vue" />
7+
8+
## API Reference
9+
610
<PropsTable name="Button" />
711

812
## Examples
@@ -18,3 +22,23 @@ Use the `size` prop to control the size of the button.
1822
Use the `variant` prop to control the visual style of the button.
1923

2024
<Example name="button/Variant.vue" />
25+
26+
#### Disabled
27+
28+
<Example name="button/Disabled.vue" />
29+
30+
#### Ghost
31+
32+
<Example name="button/Ghost.vue" />
33+
34+
### Color
35+
36+
<Example name="button/Color.vue" />
37+
38+
### High Contrast
39+
40+
<Example name="button/HighContrast.vue" />
41+
42+
### Radius
43+
44+
<Example name="button/Radius.vue" />

‎docs/examples/button/Color.vue‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<script setup lang="ts">
2+
import { Button } from '#components'
3+
</script>
4+
5+
<template>
6+
<div class="flex items-center gap-2">
7+
<Button color="indigo" variant="soft">Edit profile</Button>
8+
<Button color="cyan" variant="soft">Edit profile</Button>
9+
<Button color="orange" variant="soft">Edit profile</Button>
10+
<Button color="crimson" variant="soft">Edit profile</Button>
11+
</div>
12+
</template>

‎docs/examples/button/Disabled.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script setup lang="ts">
2+
import { Button } from '#components'
3+
</script>
4+
5+
<template>
6+
<div class="flex items-center gap-2">
7+
<Button variant="classic" disabled>
8+
Edit profile
9+
</Button>
10+
<Button variant="solid" disabled>
11+
Edit profile
12+
</Button>
13+
<Button variant="soft" disabled>
14+
Edit profile
15+
</Button>
16+
<Button variant="surface" disabled>
17+
Edit profile
18+
</Button>
19+
<Button variant="outline" disabled>
20+
Edit profile
21+
</Button>
22+
</div>
23+
</template>

‎docs/examples/button/Ghost.vue‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<script setup lang="ts">
2+
import { Button } from '#components'
3+
</script>
4+
5+
<template>
6+
<div class="flex items-center gap-2">
7+
<Button variant="ghost">Edit profile</Button>
8+
<Button variant="ghost" disabled>Edit profile</Button>
9+
</div>
10+
</template>

‎docs/examples/button/HighContrast.vue‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<script setup lang="ts">
2+
import { Button } from '#components'
3+
</script>
4+
5+
<template>
6+
<div class="flex flex-col gap-3">
7+
<div class="flex items-center gap-2">
8+
<Button color="gray" variant="classic">
9+
Edit profile
10+
</Button>
11+
<Button color="gray" variant="solid">
12+
Edit profile
13+
</Button>
14+
<Button color="gray" variant="soft">
15+
Edit profile
16+
</Button>
17+
<Button color="gray" variant="surface">
18+
Edit profile
19+
</Button>
20+
<Button color="gray" variant="outline">
21+
Edit profile
22+
</Button>
23+
</div>
24+
<div class="flex items-center gap-2">
25+
<Button color="gray" variant="classic" high-contrast>
26+
Edit profile
27+
</Button>
28+
<Button color="gray" variant="solid" high-contrast>
29+
Edit profile
30+
</Button>
31+
<Button color="gray" variant="soft" high-contrast>
32+
Edit profile
33+
</Button>
34+
<Button color="gray" variant="surface" high-contrast>
35+
Edit profile
36+
</Button>
37+
<Button color="gray" variant="outline" high-contrast>
38+
Edit profile
39+
</Button>
40+
</div>
41+
</div>
42+
</template>

‎docs/examples/button/Overview.vue‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<script setup lang="ts">
2+
import { Button, Icon } from '#components'
3+
</script>
4+
5+
<template>
6+
<div class="flex items-center gap-2">
7+
<Button>
8+
<Icon icon="lucide:bookmark" />
9+
Bookmark
10+
</Button>
11+
</div>
12+
</template>

‎docs/examples/button/Radius.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script setup lang="ts">
2+
import { Button } from '#components'
3+
</script>
4+
5+
<template>
6+
<div class="flex items-center gap-2">
7+
<Button radius="none" variant="soft">
8+
Edit profile
9+
</Button>
10+
<Button radius="small" variant="soft">
11+
Edit profile
12+
</Button>
13+
<Button radius="medium" variant="soft">
14+
Edit profile
15+
</Button>
16+
<Button radius="large" variant="soft">
17+
Edit profile
18+
</Button>
19+
<Button radius="full" variant="soft">
20+
Edit profile
21+
</Button>
22+
</div>
23+
</template>

‎src/components/button/Button.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ const resetClass = computed(() => {
5757
:data-accent-color="props.color"
5858
:data-radius="props.radius"
5959
:data-disabled="props.disabled ? true : undefined"
60+
:disabled="props.disabled && props.as === 'button' ? true : undefined"
6061
>
6162
<slot></slot>
6263
</Primitive>

0 commit comments

Comments
 (0)