Skip to content

Chip

This component may be used as an interactive control as part of a form, or as a simple link to another page or section.

Anatomy

  1. Label

Usage Guidelines

This component may be used as an interactive control as part of a form, or as a simple link to another page or section.

Specifications

Properties

PropertyTypeDescriptionRequiredDefault
textstring Inner text used as the label.Yes-

Styling

Modifiers

NameClassDescription
Selected.tux-c-chip--selectedAlternate styling used to indicate if the chip is in an active state, when used as an interactive control.

Custom Properties

NameDefaultResetsDescription
--tux-c-chip--bg-colorrgba(136, 136, 136, 0.2)Yes-
--tux-c-chip--text-colorinheritYes-
--tux-c-chip--hover--bg-colorrgba(136, 136, 136, 0.3)Yes-
--tux-c-chip--hover--text-colorvar(--tux-c-chip--text-color, inherit)Yes-
--tux-c-chip--selected--bg-colorvar(--tux-theme--text-color, black)Yes-
--tux-c-chip--selected--text-colorvar(--tux-theme--bg-color, white)Yes-

Changelog

1.18.0

  • chip added

Contained In

Other components that use this component (not including freeform content slots).

Examples

Default

{{ include( 'components/chip.twig', {
	text: "Label"
} ) }}

Selected

{{ include( 'components/chip.twig', {
	text: "Label"
	class: "tux-c-chip--selected"
} ) }}

List

<div class="tux-c-chip-list">
	{{ include('components/chip.twig', {
		text: 'Music',
	} ) }}
	{{ include('components/chip.twig', {
		text: 'Movies',
		class: 'tux-c-chip--selected'
	} ) }}
	{{ include('components/chip.twig', {
		text: 'Photos',
	} ) }}
	{{ include('components/chip.twig', {
		text: 'Books',
	} ) }}
</div>