Chip
Display a chip indicator on any component.
Usage
Wrap any component with the Chip component to display a chip indicator.
vue
<template>
<SChip>
<SButton icon="icon-[heroicons--inbox]" color="gray" />
</SChip>
</template>Size
Use the size prop to change the size of the chip.
vue
<template>
<SChip size="2xl">
<SButton icon="icon-[heroicons--inbox]" color="gray" />
</SChip>
</template>Color
Use the color prop to change the color of the chip.
vue
<template>
<SChip color="red">
<SButton icon="icon-[heroicons--inbox]" color="gray" />
</SChip>
</template>Position
Use the position prop to change the position of the chip.
vue
<template>
<SChip position="bottom-right">
<SButton icon="icon-[heroicons--inbox]" color="gray" />
</SChip>
</template>Text
Use the text prop to display text in the chip.
3
vue
<template>
<SChip text="3" size="2xl">
<SButton icon="icon-[heroicons--inbox]" color="gray" />
</SChip>
</template>Show
Use the show prop to conditionally display the chip.
vue
<script setup>
const items = [{
name: 'messages',
icon: 'icon-[heroicons--chat-bubble-oval-left]',
count: 3
}, {
name: 'notifications',
icon: 'icon-[heroicons--bell]',
count: 0
}]
</script>
<template>
<div class="flex gap-3">
<SChip v-for="{ name, icon, count } in items" :key="name" :show="count > 0">
<SButton :icon="icon" color="gray" />
</SChip>
</div>
</template>