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

icon, badges

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

Usage

::stack ::div{class="p-4"} ::alert{icon="lucide:info"} A default alert with code and a link. ::

::alert{type="secondary" icon="lucide:info"} A secondary alert with code and a link. :: ::

::alert{icon="lucide:info"}
  A **default** alert with `code` and a [link](/).
::

::alert{type="secondary" icon="lucide:info"}
  A **secondary** alert with `code` and a [link](/).
::

::

Link

::stack ::div{class="p-4"} ::alert{to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank" icon="lucide:link"} A link alert. :: ::

::alert{to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank" icon="lucide:link"}
  A **link** alert.
::

::

Variants

::tabs{variant="line"} ::stack{label="info" icon="lucide:info"} ::div{class="p-3"} ::alert{type="info" icon="lucide:info"} An info alert with code and a link. :: :: mdc ::alert{type="info" icon="lucide:info"} An **info** alert with `code` and a [link](/). :: ::

::stack{label="note" icon="lucide:pencil"} ::div{class="p-3"} ::alert{type="note" icon="lucide:pencil"} A note alert with code and a link. :: :: mdc ::alert{type="note" icon="lucide:pencil"} A **note** alert with `code` and a [link](/). :: ::

::stack{label="success" icon="lucide:lightbulb"} ::div{class="p-3"} ::alert{type="success" icon="lucide:lightbulb"} A success alert with code and a link. :: :: mdc ::alert{type="success" icon="lucide:lightbulb"} A **success** alert with `code` and a [link](/). :: ::

::stack{label="example" icon="lucide:test-tube"} ::div{class="p-3"} ::alert{type="example" icon="lucide:test-tube"} An example alert with code and a link. :: :: mdc ::alert{type="example" icon="lucide:test-tube"} An **example** alert with `code` and a [link](/). :: ::

::stack{label="warning" icon="lucide:triangle-alert"} ::div{class="p-3"} ::alert{type="warning" icon="lucide:triangle-alert"} A warning alert with code and a link. :: :: mdc ::alert{type="warning" icon="lucide:triangle-alert"} A **warning** alert with `code` and a [link](/). :: ::

::stack{label="danger" icon="lucide:circle-x"} ::div{class="p-3"} ::alert{type="danger" icon="lucide:circle-x"} A danger alert with code and a link. :: :: mdc ::alert{type="danger" icon="lucide:circle-x"} A **danger** alert with `code` and a [link](/). :: :: ::

Title

::stack ::div{class="p-4"} ::alert{title="Title" icon="lucide:layout-list"} An alert with a title. :: ::

::alert{title="Title" icon="lucide:layout-list"}
  An alert with a title.
::

::

Props

::field-group :field{name="title" type="string"}[Alert title] :field{name="icon" type="string"}[Alert icon] :field{name="type" type="'default' | 'info' | 'warning' | 'success' | 'danger' | 'secondary'" default-value="'default'"} :field{name="to" type="string"}[Link URL] :field{name="target" type="Target"}[A target attribute value to apply on the link] :field{name="external" type="boolean"}[Alias to target='_blank'] :field{name="showLinkIcon" type="boolean" default-value="true"}[Whether to show the link indicator :icon{name="lucide:arrow-up-right"}] ::