126 lines
2.3 KiB
Markdown
126 lines
2.3 KiB
Markdown
---
|
|
title: Badge
|
|
icon: lucide:badge
|
|
badges:
|
|
- value: Docus
|
|
to: https://docus.dev/api/components#badge
|
|
target: _blank
|
|
- value: Source
|
|
icon: lucide:code
|
|
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Badge.vue
|
|
target: _blank
|
|
---
|
|
|
|
## Usage
|
|
|
|
::stack
|
|
::div{class="p-3"}
|
|
::badge
|
|
Default
|
|
::
|
|
::badge{size="sm"}
|
|
Small
|
|
::
|
|
::
|
|
```mdc
|
|
::badge
|
|
Default
|
|
::
|
|
::badge{size="sm"}
|
|
Small
|
|
::
|
|
```
|
|
::
|
|
|
|
### Variants
|
|
|
|
::tabs{variant="line"}
|
|
::stack{label="outline"}
|
|
::div{class="p-3"}
|
|
:badge[Outline]{variant="outline"}
|
|
::
|
|
```mdc
|
|
:badge[Outline]{variant="outline"}
|
|
```
|
|
::
|
|
|
|
::stack{label="secondary"}
|
|
::div{class="p-3"}
|
|
:badge[Secondary]{variant="secondary"}
|
|
::
|
|
```mdc
|
|
:badge[Secondary]{variant="secondary"}
|
|
```
|
|
::
|
|
|
|
::stack{label="info"}
|
|
::div{class="p-3"}
|
|
:badge[Info]{type="info"}
|
|
::
|
|
```mdc
|
|
:badge[Info]{type="info"}
|
|
```
|
|
::
|
|
|
|
::stack{label="warning"}
|
|
::div{class="p-3"}
|
|
:badge[Warning]{type="warning"}
|
|
::
|
|
```mdc
|
|
:badge[Warning]{type="warning"}
|
|
```
|
|
::
|
|
|
|
::stack{label="success"}
|
|
::div{class="p-3"}
|
|
:badge[Success]{type="success"}
|
|
::
|
|
```mdc
|
|
:badge[Success]{type="success"}
|
|
```
|
|
::
|
|
|
|
::stack{label="lime"}
|
|
::div{class="p-3"}
|
|
:badge[lime]{type="lime"}
|
|
::
|
|
```mdc
|
|
:badge[lime]{type="lime"}
|
|
```
|
|
::
|
|
|
|
::stack{label="danger"}
|
|
::div{class="p-3"}
|
|
:badge[Danger]{type="danger"}
|
|
::
|
|
```mdc
|
|
:badge[Danger]{type="danger"}
|
|
```
|
|
::
|
|
::
|
|
|
|
### Link
|
|
|
|
::stack
|
|
::div{class="p-3"}
|
|
::badge{variant="outline" type="info" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
|
|
Link
|
|
::
|
|
::
|
|
```mdc
|
|
::badge{variant="outline" type="info" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
|
|
Link
|
|
::
|
|
```
|
|
::
|
|
|
|
## Props
|
|
|
|
::field-group
|
|
:field{name="type" type="'default' | 'info' | 'warning' | 'success' | 'danger' | 'lime'" default-value="'default'"}
|
|
:field{name="variant" type="'default' | 'secondary' | 'destructive' | 'outline'" default-value="'default'"}
|
|
:field{name="size" type="'md' | 'sm'" default-value="'md'"}
|
|
:field{name="to" type="string"}[Link URL]
|
|
:field{name="target" type="Target"}[A `target` attribute value to apply on the link]
|
|
::
|