mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-15 12:39:35 +01:00
133 lines
2.1 KiB
Markdown
133 lines
2.1 KiB
Markdown
---
|
|
description: Display a chip indicator on any component.
|
|
links:
|
|
- label: GitHub
|
|
icon: i-simple-icons-github
|
|
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Chip.vue
|
|
---
|
|
|
|
## Usage
|
|
|
|
Wrap any component with the `Chip` component to display a chip indicator.
|
|
|
|
::component-card
|
|
---
|
|
code: >-
|
|
|
|
<UButton icon="i-heroicons-inbox" color="gray" />
|
|
---
|
|
|
|
#default
|
|
:u-button{icon="i-heroicons-inbox" color="gray"}
|
|
::
|
|
|
|
### Size
|
|
|
|
Use the `size` prop to change the size of the chip.
|
|
|
|
::component-card
|
|
---
|
|
props:
|
|
size: '2xl'
|
|
code: >-
|
|
|
|
<UButton icon="i-heroicons-inbox" color="gray" />
|
|
---
|
|
|
|
#default
|
|
:u-button{icon="i-heroicons-inbox" color="gray"}
|
|
::
|
|
|
|
### Color
|
|
|
|
Use the `color` prop to change the color of the chip.
|
|
|
|
::component-card
|
|
---
|
|
props:
|
|
color: 'red'
|
|
code: >-
|
|
|
|
<UButton icon="i-heroicons-inbox" color="gray" />
|
|
---
|
|
|
|
#default
|
|
:u-button{icon="i-heroicons-inbox" color="gray"}
|
|
::
|
|
|
|
### Position
|
|
|
|
Use the `position` prop to change the position of the chip.
|
|
|
|
::component-card
|
|
---
|
|
props:
|
|
position: 'bottom-right'
|
|
code: >-
|
|
|
|
<UButton icon="i-heroicons-inbox" color="gray" />
|
|
---
|
|
|
|
#default
|
|
:u-button{icon="i-heroicons-inbox" color="gray"}
|
|
::
|
|
|
|
### Text
|
|
|
|
Use the `text` prop to display text in the chip.
|
|
|
|
::component-card
|
|
---
|
|
props:
|
|
text: '3'
|
|
size: '2xl'
|
|
excludedProps:
|
|
- size
|
|
code: >-
|
|
|
|
<UButton icon="i-heroicons-inbox" color="gray" />
|
|
---
|
|
|
|
#default
|
|
:u-button{icon="i-heroicons-inbox" color="gray"}
|
|
::
|
|
|
|
### Show
|
|
|
|
Use the `show` prop to conditionally display the chip.
|
|
|
|
:component-example{component="chip-example-show"}
|
|
|
|
### Inset
|
|
|
|
Use the `inset` prop to display the chip inside the component. This is useful when dealing with rounded components.
|
|
|
|
::component-card
|
|
---
|
|
props:
|
|
inset: true
|
|
code: >-
|
|
|
|
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Avatar" />
|
|
---
|
|
|
|
#default
|
|
:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Avatar"}
|
|
::
|
|
|
|
## Slots
|
|
|
|
### `content`
|
|
|
|
Use the `#content` slot to fully customize the chip.
|
|
|
|
:component-example{component="chip-example-content-slot"}
|
|
|
|
## Props
|
|
|
|
:component-props
|
|
|
|
## Config
|
|
|
|
:component-preset
|