Chips

Chips are small, interactive components used to display information, filter content, or trigger actions.

Overview

Usage

When to use this component?

Chips are used to represent information, filter options, or initiate actions in a compact format. They are suitable for displaying tags, categories, contacts, and other small content items. Chips can be used individually or in groups, offering an efficient way to show content or actions in limited space.

How it works

A chip typically includes a label and may feature optional elements like icons or buttons for additional actions. Chips can be interactive, allowing users to click or tap them to trigger actions (e.g., filtering content or selecting options), or static, simply displaying information without interaction.

Code

Vanilla Js

<dda-chip
    bg_color="grey"
    icon="sentiment_satisfied"
    show_close_icon="true"
    custom_class=""
    component_mode=""
    onclick="console.log("clicked!")"
    >Label
</dda-chip>

React

     <DdaChip 
            bg_color="grey" 
            icon="" 
            show_close_icon="true" 
            custom_class="" 
            component_mode=""
            onclick="console.log('clicked!')"
            >Label
        </DdaChip>

Vue

     <DdaChip 
            bg_color="grey" 
            icon="" 
            show_close_icon="true" 
            custom_class="" 
            component_mode=""
            onclick="console.log('clicked!')"
            >Label
        </DdaChip>

Angular

<dda-chip 
    bg_color="grey" 
    icon="" 
    show_close_icon="true" 
    custom_class="" 
    component_mode=""
    onclick="console.log('clicked!')"
    >Label
</dda-chip>

Properties

Property	Description	Type
bg_color	Specifies the background color of the chip. It can be predefined colors such as 'success', 'danger', 'warning', etc.	string
clickHandler	A callback function triggered when the close icon is clicked. Accepts a MouseEvent parameter.	(event: MouseEvent) => void
component_mode	Enables different modes for the component, potentially changing its appearance or behavior.	string
custom_class	Allows users to pass additional CSS classes for custom styling.	string
icon	The name of a Material Icon to be displayed at the beginning of the chip.	string
rounded	Defines the roundness of the chip's edges. Accepts values like 'sm', 'md', 'lg' for different border-radius levels.	string
show_close_icon	Determines whether a close (✕) icon should appear inside the chip, allowing users to remove it.	boolean
size	Defines the size of the chip. Expected values are 'sm', 'md', or 'lg'.	string

Anatomy

Anatomy Options

Lead Icon: Positioned on the left side of the chip, the lead icon provides a visual representation related to the chip’s content or purpose, helping users quickly identify the context.

Label: The main text of the chip, indicating its content or purpose. It provides a brief, clear description to make the chip's function easily understandable.

Trail Icon: Positioned on the right side of the chip, the trail icon allows users to interact with the chip.

Dos and Don'ts

Use chips to represent information, filter options, or trigger actions.	Don't use chips for large blocks of text or complex interactions.
Label chips clearly to indicate their purpose.	Avoid using ambiguous or unclear labels for chips.
Ensure chips are large enough to be easily tappable or clickable.	Don't make chips too small to interact with comfortably.
Use consistent styling and spacing across all chips in the application.	Don't use inconsistent styles that may confuse users.
Include icons or buttons in chips when additional actions are needed.	Don't overcrowd chips with too many elements.
Provide clear visual feedback when chips are interacted with.	Don't leave users guessing whether their interaction was successful.