Chip (chip)

Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action.

🔗 External documentation.

ID Label Description Schema
text Text The chip text
icon Icon
                        type: string

                      
            id: chip
label: Chip
description: 'Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. '
homepage: 'https://m2.material.io/components/chips'
variants:
    default:
        id: default
        label: Default
    selected:
        id: selected
        label: Pre-selected
        description: "Colored inside a 'choice' chip set."
    touch:
        id: touch
        label: Touch
        description: 'Extend the input beyond the visual bounds of the element.'
slots:
    text:
        id: text
        label: Text
        description: 'The chip text'
props:
    icon:
        id: icon
        label: Icon
        schema:
            type: string
library:
    dependencies:
        - material_icons
    id: chip
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': chip
            text: 'Add to calendar'
            icon: event

          

Default ( default )

event Add to calendar
<div class="mdc-chip"> <div class="mdc-chip__ripple"></div> <i class="material-icons mdc-chip__icon mdc-chip__icon--leading mdc-chip__icon--leading">event</i> <span class="mdc-chip__text">Add to calendar</span> </div>

Pre-selected ( selected )

Colored inside a 'choice' chip set.

Add to calendar
<div class="mdc-chip--selected mdc-chip"> <div class="mdc-chip__ripple"></div> <div class="mdc-chip__checkmark"> <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30"> <path class="mdc-chip__checkmark-path" fill="none" stroke="black" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path> </svg> </div> <span class="mdc-chip__text">Add to calendar</span> </div>

Touch ( touch )

Extend the input beyond the visual bounds of the element.

event Add to calendar
<div class="mdc-chip--touch mdc-chip"> <div class="mdc-chip__ripple"></div> <div class="mdc-chip__touch"></div> <i class="material-icons mdc-chip__icon mdc-chip__icon--leading mdc-chip__icon--leading">event</i> <span class="mdc-chip__text">Add to calendar</span> </div>