Chip
An indicator of a numeric value or a state.
Default
<script setup>
import InboxIcon from '@gdsicon/vue/inbox'
</script>
<template>
<PStack>
<PChip variant="primary">
<PButton icon></PButton>
</PChip>
<PChip variant="success">
<PButton icon></PButton>
</PChip>
<PChip variant="warning">
<PButton icon></PButton>
</PChip>
<PChip variant="error">
<PButton icon></PButton>
</PChip>
<PChip variant="secondary">
<PButton icon></PButton>
</PChip>
</PStack>
</template>
Size
<template>
<PChip size="15">
<PButton icon />
</PChip>
</template>
Text
<script setup>
import InboxIcon from '@gdsicon/vue/inbox'
</script>
<template>
<PChip label="99+" variant="error">
<PButton icon>
<InboxIcon />
</PButton>
</PChip>
</template>
Inset
Use the inset prop to display the Chip inside the component. This is useful when dealing with rounded components.
<template>
<PChip variant="success" inset>
<PAvatar src="https://avatars.githubusercontent.com/u/47918504?v=4" />
</PChip>
</template>
Props
| Name | Type | Default | Description |
|---|---|---|---|
| size | number | string | - | Diameter of the dot shown when no label is set |
| inset | boolean | - | Display the chip inside the wrapped component |
| label | string | number | null | - | Text rendered inside the chip, such as 99+ |
| variant | 'primary' | 'error' | 'warning' | 'success' | 'secondary' | primary | Chip color |
Slots
| Name | Description |
|---|---|
| default | Default slot |