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.

Table of Contents

  1. Anatomy
  2. Usage Guidelines
  3. Specifications
    1. Properties
    2. Styling
      1. Modifiers
      2. Colors
      3. Custom Properties
  4. Changelog
  5. Related
    1. Contained In
  6. Examples

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.

Colors

NameApplicationCustom PropertyRolesDefault OpacityDescription
bg-color--tux-comp-chip--bg-coloron-background0.1-
text-color--tux-comp-chip--text-coloron-background--
hover--bg-color--tux-comp-chip--hover--bg-coloron-background0.2-
hover--text-color--tux-comp-chip--hover--text-coloron-background--
selected--bg-color--tux-comp-chip--selected--bg-colorprimary--
selected--text-color--tux-comp-chip--selected--text-coloron-primary--

Custom Properties

NameDefaultResetsDescription
--tux-comp-chip--bg-colorrgba(136, 136, 136, 0.2)Yes-
--tux-comp-chip--text-colorinheritYes-
--tux-comp-chip--hover--bg-colorrgba(136, 136, 136, 0.3)Yes-
--tux-comp-chip--hover--text-colorvar(--tux-c-chip--text-color, inherit)Yes-
--tux-comp-chip--selected--bg-colorvar(--tux-theme--text-color, black)Yes-
--tux-comp-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>