Components

Tag

Let users quickly identify promotions, statuses, or categories.

Import

import { Tag } from "@dr-max/ui/tag"

The entry carries its own precompiled CSS (including the styles of the Icon and Text parts it composes) — no extra style imports needed.

Usage

Discount 10%

<script setup lang="ts">
import { Tag } from "@dr-max/ui/tag"
</script>

<template>
  <Tag color="primary-red">Discount 10%</Tag>
</template>

Colors

Primary redNeutralInformationSuccessWarningError

<template>
  <Tag color="primary-red">Primary red</Tag>
  <Tag color="neutral">Neutral</Tag>
  <Tag color="information">Information</Tag>
  <Tag color="success">Success</Tag>
  <Tag color="warning">Warning</Tag>
  <Tag color="error">Error</Tag>
</template>

Sizes

SmallMediumLargeExtra large

<template>
  <Tag color="neutral" size="sm">Small</Tag>
  <Tag color="neutral" size="md">Medium</Tag>
  <Tag color="neutral" size="lg">Large</Tag>
  <Tag color="neutral" size="xl">Extra large</Tag>
</template>

Icon

The icon prop takes an IconDefinition object imported from @dr-max/ui/icons (not a string), so it can't be set from markdown — use the playground below to try it live:

<script setup lang="ts">
import { iconEco } from "@dr-max/ui/icons"
import { Tag } from "@dr-max/ui/tag"
</script>

<template>
  <Tag :icon="iconEco" color="success">ECO</Tag>
</template>

Playground

Discount 10%

slot

color

size

icon

<script setup lang="ts">
import { Tag } from '@dr-max/ui/tag'
</script>

<template>
  <Tag color="primary-red" size="md">Discount 10%</Tag>
</template>