Skip to main content
The APill component is an atom that displays a badge with an optional avatar and close button. It extends Nuxt UI’s UBadge component with additional functionality.

​
Props

​
src
string
default:"/media/img/ui-user-unknown.png"
Avatar image source URL
​
label
string
default:""
Text label to display on the pill
​
color
BadgeColor
default:"neutral"
Color theme of the badge. Derived from Nuxt UI’s UBadge component.
​
variant
BadgeVariant
default:"outline"
Visual style variant. Options include outline, solid, soft, etc.
​
size
BadgeSize
default:"sm"
Size of the badge. Options: xs, sm, md, lg, xl
​
hasAvatar
boolean
default:"true"
Whether to show the avatar image
​
isClosable
boolean
default:"true"
Whether to show the close button

​
Events

​
on-close
() => void
Emitted when the close button is clicked

​
Slots

​
default
The default slot for custom content within the pill

​
Usage

​
Basic Example

<template>
  <APill 
    label="John Doe" 
    src="/path/to/avatar.jpg"
    @on-close="handleClose"
  />
</template>

<script setup>
function handleClose() {
  console.log('Pill closed')
}
</script>

​
Without Avatar

<template>
  <APill 
    label="Tag Name" 
    :has-avatar="false"
    color="primary"
    variant="solid"
  />
</template>

​
Custom Sizes and Colors

<template>
  <div class="flex gap-2">
    <APill label="Small" size="sm" color="primary" />
    <APill label="Medium" size="md" color="success" />
    <APill label="Large" size="lg" color="error" />
  </div>
</template>

​
Non-closable Pill

<template>
  <APill 
    label="Read-only" 
    :is-closable="false"
    variant="soft"
  />
</template>

​
Type Exports

The component exports the following types for use in your application: 
export type BadgeSize = InstanceType<typeof UBadge>['$props']['size']
export type BadgeColor = InstanceType<typeof UBadge>['$props']['color']
export type BadgeVariant = InstanceType<typeof UBadge>['$props']['variant']

​
Implementation Details

The component uses computed properties to adjust icon and text sizes based on the size prop:
  • Icon sizes: size-3.5 for xs-lg, size-4 for xl
  • Text sizes: Responsive scaling from text-xs to text-base
  • Spacing: Dynamic gap and padding based on size
Source: /home/daytona/workspace/source/app/components/a/pill/a-pill.vue

Build docs developers (and LLMs) love

Get started for freeTalk to us