Chip

An indicator of a numeric value or a state.

Usage

Wrap any component with a Chip to display an indicator.

<template>
  <PChip>
    <PButton icon="i-lucide:mail" color="neutral" variant="subtle" />
  </PChip>
</template>

Color

Use the color prop to change the color of the Chip.

color

<template>
  <PChip color="neutral">
    <PButton icon="i-lucide:mail" color="neutral" variant="subtle" />
  </PChip>
</template>

Size

Use the size prop to change the size of the Chip.

size

<template>
  <PChip size="3xl">
    <PButton icon="i-lucide:mail" color="neutral" variant="subtle" />
  </PChip>
</template>

Text

Use the text prop to set the text of the Chip.

text

size

<template>
  <PChip :text="5" size="3xl">
    <PButton icon="i-lucide:mail" color="neutral" variant="subtle" />
  </PChip>
</template>

Position

Use the position prop to change the position of the Chip.

position

<template>
  <PChip position="bottom-left">
    <PButton icon="i-lucide:mail" color="neutral" variant="subtle" />
  </PChip>
</template>

Inset

Use the inset prop to display the Chip inside the component. This is useful when dealing with rounded components.

inset

<template>
  <PChip inset>
    <PAvatar src="https://github.com/praburangki.png" />
  </PChip>
</template>

Standalone

Use the standalone prop alongside the inset prop to display the Chip inline.

standalone

inset

<template>
  <PChip standalone inset />
</template>

It's used this way in the CommandPalette, InputMenu, Select or SelectMenu components for example.

Examples

Control visibility

You can control the visibility of the Chip using the show prop.

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';

const statuses = ['online', 'away', 'busy', 'offline'];
const status = ref(statuses[0]);

const color = computed(() => status.value ? { online: 'success', away: 'warning', busy: 'error', offline: 'neutral' }[status.value] as any : 'online');

const show = computed(() => status.value !== 'offline');

// Note: This is for demonstration purposes only. Don't do this at home.
onMounted(() => {
  setInterval(() => {
    if (status.value) {
      status.value = statuses[(statuses.indexOf(status.value) + 1) % statuses.length];
    }
  }, 1000);
});
</script>

<template>
  <PChip
    :color="color"
    :show="show"
    inset
  >
    <PAvatar src="https://github.com/praburangki.png" />
  </PChip>
</template>

In this example, the Chip has a color per status and is displayed when the status is not offline.

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`color`	`'primary'`	`"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "error" \| "neutral"`
`size`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl" \| "3xs" \| "2xs" \| "2xl" \| "3xl"`
`text`		`string \| number` Display some text inside the chip.
`position`	`'top-right'`	`"top-right" \| "bottom-right" \| "top-left" \| "bottom-left"` The position of the chip.
`inset`	`false`	`boolean` When `true`, keep the chip inside the component for rounded elements.
`standalone`	`false`	`boolean` When `true`, render the chip relatively to the parent.
`show`	`true`	`boolean`
`pohon`		`{ root?: ClassValue; base?: ClassValue; }`

Slots

Slot	Type
`default`	`object`
`content`	`object`

Emits

Event	Type
`update:show`	`[value: boolean]`

Theme

We use unocss-variants to customize the theme. Read more about it in the theming guide.

Below is the theme configuration skeleton for the PChip. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.

app.config.ts

export default defineAppConfig({
  pohon: {
    chip: {
      slots: {
        root: '',
        base: ''
      },
      variants: {
        color: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        size: {
          '3xs': '',
          '2xs': '',
          xs: '',
          sm: '',
          md: '',
          lg: '',
          xl: '',
          '2xl': '',
          '3xl': ''
        },
        position: {
          'top-right': '',
          'bottom-right': '',
          'top-left': '',
          'bottom-left': ''
        },
        inset: {
          false: ''
        },
        standalone: {
          false: ''
        }
      },
      compoundVariants: [],
      defaultVariants: {
        size: 'md',
        color: 'primary',
        position: 'top-right'
      }
    }
  }
};

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    chip: {
      slots: {
        root: '',
        base: ''
      },
      variants: {
        color: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        size: {
          '3xs': '',
          '2xs': '',
          xs: '',
          sm: '',
          md: '',
          lg: '',
          xl: '',
          '2xl': '',
          '3xl': ''
        },
        position: {
          'top-right': '',
          'bottom-right': '',
          'top-left': '',
          'bottom-left': ''
        },
        inset: {
          false: ''
        },
        standalone: {
          false: ''
        }
      },
      compoundVariants: [],
      defaultVariants: {
        size: 'md',
        color: 'primary',
        position: 'top-right'
      }
    }
  }
};

Changelog

No recent changes

Card

Display content in a card with a header, body and footer.

Collapsible

An interactive component which expands/collapses a panel.