Chip Family

Chips are compact elements that represent an attribute, text, entity, or action.

Components

• Chip: Displays information or an attribute. Can have an avatar and a delete icon.
• ActionChip: Represents a primary action.
• ChoiceChip: Allows selection from a set of options.

Basic Chips

Basic Chip

With Delete

A

With Deletate & Avatar

A

With Avatar

Action Chips

Action 1

Action 2

Choice Chips (Selected: small)

Small

Medium

Large

Code Example

<script setup lang="ts">
import { ActionChip, Chip, ChoiceChip, Colors, Column, Row, SizedBox, Text } from "fluekit";
import { ref } from "vue";

const selectedChip = ref("small");

// Simple Icon component using h function

const handleDelete = () => {
  console.log("Deleted");
};
</script>

<template>
  <Column crossAxisAlignment="start">
    <Text>Basic Chips</Text>
    <Row :gap="8">
      <Chip label="Basic Chip" />
      <Chip label="With Delete" deletable @delete="handleDelete" />
      <Chip label="With Deletate & Avatar" deletable>
        <template #avatar>
          <div
            style="
              background: #2196f3;
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
            "
          >
            <span style="color: white; font-size: 10px">A</span>
          </div>
        </template>
      </Chip>
      <Chip label="With Avatar">
        <template #avatar>
          <div
            style="
              background: #2196f3;
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
            "
          >
            <span style="color: white; font-size: 10px">A</span>
          </div>
        </template>
      </Chip>
    </Row>

    <SizedBox :height="20" />

    <Text>Action Chips</Text>
    <Row :gap="8">
      <ActionChip label="Action 1" @pressed="() => console.log('Action 1')" />
      <ActionChip
        label="Action 2"
        :backgroundColor="Colors.blue"
        labelColor="white"
        @pressed="() => console.log('Action 2')"
      />
    </Row>

    <SizedBox :height="20" />

    <Text>Choice Chips (Selected: {{ selectedChip }})</Text>
    <Row :gap="8">
      <ChoiceChip
        label="Small"
        :selected="selectedChip === 'small'"
        @selected="() => (selectedChip = 'small')"
      />
      <ChoiceChip
        label="Medium"
        :selected="selectedChip === 'medium'"
        @selected="() => (selectedChip = 'medium')"
      />
      <ChoiceChip
        label="Large"
        :selected="selectedChip === 'large'"
        @selected="() => (selectedChip = 'large')"
      />
    </Row>
  </Column>
</template>

Chip Props

Prop	Type	Default	Description
label	string	-	The content of the chip.
avatar	Component	-	An optional avatar widget.
backgroundColor	string | Color	Colors.grey[300]	The background color.
labelColor	string | Color	Colors.black87	The text color.
onDeleted	() => void	-	Callback when delete icon is pressed.

ActionChip Props

Inherits Chip props, plus:

Prop	Type	Default	Description
onPressed	() => void	-	Callback when the chip is pressed.

ChoiceChip Props

Inherits Chip props, plus:

Prop	Type	Default	Description
selected	boolean	false	Whether the chip is selected.
selectedColor	string | Color	Colors.blue	Background color when selected.
onSelected	(value: boolean) => void	-	Callback when selection state changes.