Usage

Default

Use the label prop to set the text of the component.

Colors

Use the color prop to customize the component's color.

Variants

Use the variant prop to customize the component's appearance.

Icons

Use the icon prop to position an icon before the label.

<script setup lang="ts">
import CLPill from '@codeandfunction/callaloo/CLPill';
import { CLColors, CLColorVariants, CLIconNames } from '@codeandfunction/callaloo';
</script>

<template>
  <CLPill :color="CLColors.Primary" :icon="CLIconNames.Tag" :variant="CLColorVariants.Soft" label="Tag" />
  <CLPill :color="CLColors.Success" :icon="CLIconNames.Check" :variant="CLColorVariants.Soft" label="Verified" />
  <CLPill :color="CLColors.Info" :icon="CLIconNames.InfoCircle" :variant="CLColorVariants.Soft" label="Info" />
</template>

Count

Use the count prop to display a count value alongside the label.

Rounded

Use the rounded prop to control the border radius. By default, pills are rounded.

<script setup lang="ts">
import CLPill from '@codeandfunction/callaloo/CLPill';
import { CLColors } from '@codeandfunction/callaloo';
</script>

<template>
  <CLPill :color="CLColors.Primary" label="Rounded" rounded />
  <CLPill :color="CLColors.Primary" :rounded="false" label="Not Rounded" />
</template>

Elevated

Use the elevated prop to add a drop shadow.

Clickable

Use the onClick prop to make the pill interactive. When a click handler is provided, the pill becomes clickable.

<script setup lang="ts">
import CLPill from '@codeandfunction/callaloo/CLPill';
import { CLColors, CLColorVariants } from '@codeandfunction/callaloo';

const handleClick = () => {
  console.log('Pill clicked!')
}
</script>

<template>
  <CLPill :color="CLColors.Primary" :variant="CLColorVariants.Soft" label="Click me" :onClick="handleClick" />
</template>

Props