Chip — Feedback

Chips & Tags

Compact tokens for tags, filters, and selections, with contextual colors, optional icons, and a removable (dismissible) variant.

Chip Variants

DefaultPrimarySecondarySuccessWarningDangerInfo

Chip Sizes & Outline

SmallDefaultLarge

Outline PrimaryOutline SuccessOutline Danger

Dismissible Chips

Removable Tag Category

Usage

<script setup lang="ts">
import { VdChip } from "@vanduo-oss/vd3";
</script>

<template>
  <VdChip variant="primary">Default</VdChip>
  <VdChip variant="success" outline>Outline</VdChip>
  <VdChip variant="danger" dismissible @dismiss="onRemove">Removable</VdChip>
</template>

API Reference

Class Name	Description	Type
`.vd-chip`	Base component class required for all Vanduo chips and tags.	Component
`.vd-chip-[variant]`	Solid color modifier on the unified status vocabulary (-primary, -secondary, -success, -warning, -danger, -info). -error is a retained alias for -danger.	Modifier
`.vd-chip-outline-[variant]`	Outline color modifier featuring a transparent background with colored border.	Modifier
`.vd-chip-[size]`	Size modifier class (e.g., -sm for small, -lg for large). Defaults to medium if omitted.	Modifier
`.vd-chip-dismissible`	Modifier class that adjusts right padding to accommodate a close button.	Modifier
`.vd-chip-close`	Component class for the 'X' close icon inside a dismissible chip.	Sub-component

Component API (Vue 3)

Prop / slot / event	Description
`:variant`	primary \| secondary \| success \| warning \| danger \| info (default "primary").
`:size`	sm \| md \| lg.
`:outline`	Transparent background with a coloured border.
`:dismissible`	Renders a close button that emits dismiss.
`:clickable`	Makes the chip emit click on activation.
`:avatar`	Image src rendered as a leading avatar.
`default slot`	Chip label.
`@dismiss / @click`	Emitted on close / click (when clickable).