Alixan UI

Chip

A compact interactive token for filters, selections and removable metadata.

Installation

npx alixan-ui-nuxt add chip

Usage

<template>
  <div class="flex flex-wrap items-center gap-2">
    <Chip label="Default" />
    <Chip label="Selected" selected />
    <Chip label="Design" type="select" />
    <Chip label="Nuxt" type="remove" />
  </div>
</template>

Size

<template>
  <div class="flex flex-wrap items-center gap-2">
    <Chip label="Small" size="sm" />
    <Chip label="Medium" />
    <Chip label="Large" size="lg" />
  </div>
</template>

API Reference

PropTypeDefaultDescription
labelstring-Fallback text when the default slot is not used.
type'default' | 'select' | 'remove''default'Adds the select chevron or remove icon.
size'sm' | 'md' | 'lg''md'Controls height, radius, padding and icon size.
selectedbooleanfalseSwitches the chip into the active primary state.
disabledbooleanfalseDisables interaction and reduces opacity.