Chip

This component displays brief information with optional interactivity. It supports icons before and after the label and can function as either a static element or a selectable button with a selected state.

New user

Groenlo

Props

icon-leading?: FluxIconName
The icon shown at the start of the chip.

icon-trailing?: FluxIconName
The icon shown at the end of the chip.

is-selectable?: boolean
Indicates that the chip is selectable.

is-selected?: boolean
Indicates that the chip is selected.

label: string
The label of the chip.

Emits

click: [MouseEvent]
Triggered when the chip is clicked.

Examples

List

Chips can be placed within stacks to create a list.

Preview

Releases

Builds

Code

<template>
    <FluxStack
        direction="horizontal"
        :gap="6">
        <FluxChip
            icon-leading="bolt"
            label="Releases"/>

        <FluxChip
            icon-leading="gear"
            label="Builds"/>
    </FluxStack>
</template>

<script
    lang="ts"
    setup>
    import { FluxChip, FluxStack } from '@flux-ui/flux';
</script>

Selectable

A chip that is selectable can be used in filters for example.

Preview

Code

<template>
    <FluxChip
        icon-leading="stars"
        is-selectable
        :is-selected="selected"
        label="Prospects"
        @click="selected = !selected"/>
</template>

<script
    lang="ts"
    setup>
    import { FluxChip } from '@flux-ui/flux';
    import { ref } from 'vue';

    const selected = ref(true);
</script>

Used components

• Icon