Chips

Usage

See design usage guidelines

Chips present information about people, places, or subjects in a compact form and can trigger actions.

Chip

Use a chip by adding the class chip to your element

Sizes

This is a small chipThis is a medium chipThis is a large chip

<div class="chip-section">
    <span class="chip">This is a small chip</span>
    <span class="chip chip-medium">This is a medium chip</span>
    <span class="chip chip-large">This is a large chip</span>
</div>

Fill

This is a large solid chipThis is a large outlined chip

 <div class="chip-section">
    <span class="chip chip-large">This is a large solid chip</span>
    <span class="chip chip-large chip-outlined">This is a large outlined chip</span>
</div>

State

This is a large solid chipThis solid chip has been disabled Outlined chip has been disabled

<div class="chip-section">
    <span class="chip chip-large">This is a large solid chip</span>
    <span class="chip chip-large" disabled>This solid chip has been disabled </span>
    <span class="chip chip-outlined chip-large" disabled>Outlined chip has been disabled </span>
</div>

Radius

Small radius chipMedium radius chipLarge radius chipFull radius chip

<div class="chip-section">
    <span class="chip chip-large chip-radius-small">Small radius chip</span>
    <span class="chip chip-large chip-radius-medium">Medium radius chip</span>
    <span class="chip chip-large chip-radius-large">Large radius chip</span>
    <span class="chip chip-large chip-radius-full">Full radius chip</span>
</div>

With Icons

Chip with icon Chip with icon Chip with icon Chip with icon Chip with icon Chip with icon

<div class="chip-section">
    <span class="chip chip-large chip-radius-small">Chip with icon <span class="chip-icon"></span></span>
    <span class="chip chip-outlined chip-large chip-radius-small">Chip with icon <span class="chip-icon"></span></span>
    <span class="chip chip-medium chip-radius-small">Chip with icon <span class="chip-icon"></span></span>
    <span class="chip chip-outlined chip-medium chip-radius-small">Chip with icon <span class="chip-icon"></span></span>
    <span class="chip chip-radius-small">Chip with icon <span class="chip-icon"></span></span>
    <span class="chip chip-outlined chip-radius-small">Chip with icon <span class="chip-icon"></span></span>
</div>

Customisation

.chip {
    --chip-size-small: 28px;
    --chip-size-medium: 32px;
    --chip-size-large: 38px;
    --chip-radius-small: 2px;
    --chip-radius-medium: 4px;
    --chip-radius-large: 6px;
    --chip-radius-full: 100px;
    --chip-solid-background: var(--grey-light);
    --chip-outlined-border-color: var(--grey-light-active);
    --chip-solid-background-hover: var(--grey-light-hover);
    --chip-padding-inline: .75rem; 
}

.chip-icon {
    --chip-icon: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.05086 5.63616C6.66033 5.24563 6.02717 5.24563 5.63664 5.63616C5.24612 6.02668 5.24612 6.65984 5.63664 7.05037L10.5864 12.0001L5.63664 16.9499C5.24612 17.3404 5.24612 17.9736 5.63664 18.3641C6.02717 18.7546 6.66033 18.7546 7.05086 18.3641L12.0006 13.4143L16.9504 18.3641C17.3409 18.7546 17.974 18.7546 18.3646 18.3641C18.7551 17.9736 18.7551 17.3404 18.3646 16.9499L13.4148 12.0001L18.3646 7.05037C18.7551 6.65984 18.7551 6.02668 18.3646 5.63616C17.974 5.24563 17.3409 5.24563 16.9504 5.63616L12.0006 10.5859L7.05086 5.63616Z" fill="rgba(112,112,112,1)" /></svg>');
    --chip-small-icon: var(--chip-icon);
    --chip-medium-icon: var(--chip-icon);  
    --chip-large-icon: var(--chip-icon);
    --chip-icon-size: 24px;
}

Usage Guidelines