Alixan UI

Chip

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

Installation

npx alixan-ui-nuxt add chip

Usage

<script setup lang="ts">
import Chip from '@/components/ui/chip/Chip.vue';
</script>

<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

<script setup lang="ts">
import Chip from '@/components/ui/chip/Chip.vue';
</script>

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