markdown/docs/1.简单文档/5.components/badge.md

title, icon, badges

title	icon	badges
Badge	lucide:badge	value to target Docus https://docus.dev/api/components#badge _blank value icon to target Source lucide:code https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Badge.vue _blank

Usage

::stack ::div{class="p-3"} ::badge Default :: ::badge{size="sm"} Small :: ::

::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 :: ::

::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] ::