UCLA Design System

Chips

A chip web component is a small, interactive element typically used to represent discrete pieces of information, such as tags, keywords, or actions.

When to use

Chips are like buttons but contextual to a piece of content. They communicate related actions, linkable tags, or content-specific filters. They can link to a new page or trigger an inline display change or status message. They can also be created dynamically from user input.

Anatomy

Chips Anatomy

1. Leading Icon

May be static or dynamic upon toggle. It can illustrate the content or denote status (ie. checkmark on or off, X to turn off or remove).

2. Trailing Icon

May be static or dynamic upon toggle. It can illustrate the content or denote status (ie. filter checkmark on or off).

3. Text (required)

Text is always present and does not change with action or state changes.

4. Container (required)

The entire element has the same link or action - elements within are not independently clickable.

Examples

<div style="display: flex; align-items: center">
<button class="ucla-chip">Lorem ipsum</button>

<button class="ucla-chip ucla-chip__current">Lorem ipsum</button>

<button class="ucla-chip ucla-btn--icon-lead">
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M16 2L16 16L2 16L2 2L16 2ZM16 0L2 0C0.9 0 0 0.9 0 2L0 16C0 17.1 0.9 18 2 18L16 18C17.1 18 18 17.1 18 16L18 2C18 0.9 17.1 0 16 0ZM11.14 8.86L8.14 12.73L6 10.14L3 14L15 14L11.14 8.86Z" />
    </svg>
    Lorem ipsum
</button>

<button class="ucla-chip ucla-btn--icon-trail">
    Lorem ipsum
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M12.6 1.22392e-07L14 1.4L8.4 7L14 12.6L12.6 14L7 8.4L1.4 14L-1.22392e-07 12.6L5.6 7L-1.10153e-06 1.4L1.4 1.10153e-06L7 5.6L12.6 1.22392e-07Z" fill="#00598C"/>
    </svg>

</button>
</div>

Best practices & Chip Types

Only use in groups of 2 or more. If there’s only one, a button or link may be more suitable.

Action chips are similar to buttons but contextual and repeatable.

Tag chips are also contextual to a piece of content. They can be similar to a button when used as a link or be an interactive element when used as a filter. When a chip is used to trigger an inline display change or status message, use the “current” state and/or add a checkmark or X to indicate it can toggle off.