Chips

Arguments

There are two different variations of the chip component: a singular chip, and a chip collection.

Both macros have two arguments that can be given:

Singular Chip

Argument	type	required?	Explanation
`Text`	string	`required`	The text that is to be shown on the chip.
`options`	array	`optional`	The array with options for a singular chip. See options for more info.

Chip Collection

Argument	type	required?	Explanation
`Data collection`	array	`required`	A collection of data, which will be used to populate each chip.
`options`	array	`optional`	The array with options for a chip collection. See options for more info.

Available options

A list of available options to pass to the options argument:

Option	Option usage	type	default	Explanation
`path`	Singular chip	string	`''`	Make the chip a link to provided path
`icon`	Singular chip	string	`''`	Adds a `chip-icon` with the provided icon name
`classes`	Singular chip	string	`''`	Add extra CSS classes to the chip
`tooltip`	Singular chip	string	`''`	Add a descriptive tooltip to the chip, that shows when hovering the chip.
`truncate`	Singular chip	boolean	`false`	When this parameter is set, the text will be truncated to a width of approximately 12 characters.
`chip_container`	Singular chip	boolean	`false`	If there is more spacing required for a single chip, the container option can be set.
`amount_visible`	Chip collection	number	`1`	This option is used for determining how much chips are shown in the collection, before a `chip-more` element is rendered.
`collection_container`	Chip collection	boolean	`false`	This places the collection inside a container with more spacing around each chip. It can be handy for use in conjunction with a `<label>` element.
`empty_value`	Chip collection	string	`''`	This option can be set when a possibility is there that the collection is empty.

Singular Chips

See the examples on how to use different singular variations of chips. You can combine these when needed.

Notice how there's no spacing around chips in the examples below? See the chapter Multiple Chips for a good solution.

Normal Chip

Example text

{% import '@leviy-templates/macros/chips.html.twig' as chips %}
{{
    chips.chip('Example text')
}}

Clickable Chip

Example text

{% import '@leviy-templates/macros/chips.html.twig' as chips %}
{{
    chips.chip(
        'Example text',
        {
            path: '#'
        }
    )
}}

Chips with icons

Clickable chip with icon

Normal chip with icon

{% import '@leviy-templates/macros/chips.html.twig' as chips %}
{{
    chips.chip(
        'Clickable chip with icon',
        {
            path: '#',
            icon: 'people'
        }
    )
}}
{{
    chips.chip(
        'Normal chip with icon',
        {
            icon: 'people'
        }
    )
}}

Chips with tooltips

Clickable chip with tooltip

Normal chip with tooltip

{% import '@leviy-templates/macros/chips.html.twig' as chips %}
{{
    chips.chip(
        'Clickable chip with tooltip',
        {
            path: '#',
            tooltip: 'tooltip',
        }
    )
}}
{{
    chips.chip(
        'Normal chip with tooltip',
        {
            tooltip: 'tooltip',
        }
    )
}}

Chip with truncated text

Very long name that does not fit inside a chip

{% import '@leviy-templates/macros/chips.html.twig' as chips %}
{{
    chips.chip(
        'Very long name that does not fit inside a chip',
        {
            tooltip: 'Very long name that does not fit inside a chip',
            truncate: true,
        }
    )
}}

The More chip

This special chip can be called by adding an extra chip-more class to the macro call.

20 More...

{% import '@leviy-templates/macros/chips.html.twig' as chips %}
{{
    chips.chip(
        '20 More...',
        {
            classes: 'chip-more',
            tooltip: 'A descriptive tooltip',
        }
    )
}}

The whole shebang

Example Label

Normal Chip

Normal chip with icon

Clickable chip Clickable chip with icon Clickable chip with tooltip

Very long name that does not fit inside a chip

Clickable darker colored chip (all options)

Chip More

{% import '@leviy-templates/macros/chips.html.twig' as chips %}
<label>Example Label</label>
<div class="chip-container">
    {{
        chips.chip('Normal Chip')
    }}
    {{
        chips.chip(
            'Normal chip with icon',
            {
                icon: 'error',
            }
        )
    }}
    {{
        chips.chip(
            'Clickable chip',
            {
                path: '#',
            }
        )
    }}
    {{
        chips.chip(
            'Clickable chip with icon',
            {
                path: '#',
                icon: 'check_circle',
            }
        )
    }}
    {{
        chips.chip(
            'Clickable chip with tooltip',
            {
                path: '#',
                tooltip: 'A descriptive tooltip',
            }
        )
    }}
    {{
        chips.chip(
            'Very long name that does not fit inside a chip',
            {
                truncate: true,
            }
        )
    }}
    {{
        chips.chip(
            'Clickable darker colored chip (all options)',
            {
                path: '#',
                classes: 'chip-primary-dark',
                icon: 'info',
                tooltip: 'Truncated chip with non-default tooltip text',
                truncate: true,
            }
        )
    }}
    {{
        chips.chip(
            'Chip More',
            {
                classes: 'chip-more',
                tooltip: 'Another descriptive tooltip',
            }
        )
    }}
</div>

Container option argument for singular chips

This option can be set when a singular chip is being rendered.

Chips inside a chip-container get extra margin on the top and the right. This is especially handy when the element ispreceded by another element, such as a <label>. If you just want to have spacing on the right, it's better to add a mr-* class to the chip options.

Example Label

Singular chip with margin-top and margin-right

{% import '@leviy-templates/macros/chips.html.twig' as chips %}
<label>Example Label</label>
{{
    chips.chip(
        'Singular chip with margin-top and margin-right',
        {
            path: '#',
            icon: 'check_circle',
            chip_container: true,
        }
    )
}}

Chip collection

Given a data collection, you can create a chip collection by using the |map Twig filter to map the data to each chip in the collection:

See the Twig documentation for more info.

Example Label

Item 1 Item 2 Item 3

5 more

{% set dataCollection = [
    {title: 'Item 1', tooltip: 'Tooltip item 1', path: 'url-to-item-1'},
    {title: 'Item 2', tooltip: 'Tooltip item 2', path: 'url-to-item-2'},
    {title: 'Item 3', tooltip: 'Tooltip item 3', path: 'url-to-item-3'},
    {title: 'Item 4', tooltip: 'Tooltip item 4', path: 'url-to-item-4'},
    {title: 'Item 5', tooltip: 'Tooltip item 5', path: 'url-to-item-5'},
    {title: 'Item 6', tooltip: 'Tooltip item 6', path: 'url-to-item-6'},
    {title: 'Item 7', tooltip: 'Tooltip item 7', path: 'url-to-item-7'},
    {title: 'Item 8', tooltip: 'Tooltip item 8', path: 'url-to-item-8'}
] %}

{% import '@leviy-templates/macros/chips.html.twig' as chips %}
<label>Example Label</label>
{{
    chips.collection(
        dataCollection|map(data => {
            title: data.title,
            tooltip: data.tooltip,
            path: data.path,
        }),
        {
            amount_visible: 3,
            collection_container: true,
        }
    )
}}

Empty Chip collection

Example Label

no data found

{% set dataCollection = [] %}

{% import '@leviy-templates/macros/chips.html.twig' as chips %}
<label>Example Label</label>
{{
    chips.collection(
        dataCollection|map(data => {
            title: data.title,
            tooltip: data.tooltip,
            path: data.path,
        }),
        {
            collection_container: true,
            empty_value: 'no data found',
        }
    )
}}

Arguments
Available options
Singular Chips
Chip collection
- Empty Chip collection