InfoChip ​

An InfoChip is a non-interactive item that provides information.

Guidelines ​

Using info chips ​

Use the InfoChip component to label, categorize, or organize information using keywords. It can be also used to provide success, warning or error feedback to the user.

This type of chip is just informative so it cannot be clickable or removable.

Specifications ​

Info chips may contain the following items:

1. Icon (optional)
   You can include a starting icon to visually convey the label. For notice chips, this icon is optional, while for chips providing feedback (error, warning, and success chips), the icon is required to communicate the feedback status effectively.
2. Label
   Descriptive text about the chip.

Width ​

By default, the InfoChip's width dynamically adjusts based on the length of the text. However, for consistency when grouping similar chips, the width of these chips can also be set to a fixed value, if required.

Types ​

InfoChip works as an informative element, with its default type being "notice." In addition to this, the chip can offer user feedback by including icons and colors associated with success, warning, or error statuses.

Notice chip ​

As the notice chip solely conveys information without offering user feedback, its icon serves to emphasize the chip's label in a decorative manner. Any icon can be used, or it can be omitted as needed.

Success, Warning and Error chips ​

Conversely, in chips that offer user feedback (success, warning, and error chips), both the icon and its associated feedback color are essential for conveying meaning and feedback effectively to users. Therefore, these icons cannot be replaced or removed.

Refer to the InfoChip component in Codex Figma.

Interaction states ​

InfoChip is purely informative so it only uses the default state.

Demos ​

Configurable ​

<cdx-info-chip>Info Chip</cdx-info-chip>

icon

status

default

Reading direction

Default, with icon ​

Custom icons can only be used with the notice status. If they are passed with a different status, they will be ignored.

<template>
	<div>
		<cdx-info-chip :icon="cdxIconCamera">
			Photos
		</cdx-info-chip>
	</div>
</template>

<script>
import { defineComponent } from 'vue';
import { CdxInfoChip } from '@wikimedia/codex';
import { cdxIconCamera } from '@wikimedia/codex-icons';

export default defineComponent( {
	name: 'ChipWithIcon',
	components: {
		CdxInfoChip
	},
	setup() {
		return {
			cdxIconCamera
		};
	}
} );
</script>

<template>
	<div>
		<cdx-info-chip :icon="cdxIconCamera">
			Photos
		</cdx-info-chip>
	</div>
</template>

<script>
const { defineComponent } = require( 'vue' );
const { CdxInfoChip } = require( '@wikimedia/codex' );
const { cdxIconCamera } = require( './icons.json' );

// @vue/component
module.exports = defineComponent( {
	name: 'ChipWithIcon',
	components: {
		CdxInfoChip
	},
	setup() {
		return {
			cdxIconCamera
		};
	}
} );
</script>

Long Text ​

It is generally best practice to use short text with the InfoChip. Long text content will be truncated with an ellipsis and lines will not be wrapped.

<template>
	<div>
		<cdx-info-chip>
			This is really really really really really
			really really really really really really
			really really really really really really
			really really really really really really
			long text
		</cdx-info-chip>
	</div>
</template>

<script>
import { defineComponent } from 'vue';
import { CdxInfoChip } from '@wikimedia/codex';

export default defineComponent( {
	name: 'ChipWithLongText',
	components: {
		CdxInfoChip
	}
} );
</script>

<template>
	<div>
		<cdx-info-chip>
			This is really really really really really
			really really really really really really
			really really really really really really
			really really really really really really
			long text
		</cdx-info-chip>
	</div>
</template>

<script>
const { defineComponent } = require( 'vue' );
const { CdxInfoChip } = require( '@wikimedia/codex' );

// @vue/component
module.exports = defineComponent( {
	name: 'ChipWithLongText',
	components: {
		CdxInfoChip
	}
} );
</script>

Vue usage ​

Props ​

Slots ​

CSS-only version ​

Markup structure ​

Text only ​

A simple chip with text content and no icon is straightforward.

<!-- Outer element is a <div>. -->
<div class="cdx-info-chip">
  <!-- Text element. -->
  <span class="cdx-info-chip--text">
    <!-- Chip text -->
    Info Chip
  </span>
</div>

The chip will inherit the reading direction of its context.

<!-- Establish a right-to-left reading context -->
<div dir="rtl">
  <!-- Outer element is a <div>. -->
  <div class="cdx-info-chip">
    <!-- Text element. -->
    <span class="cdx-info-chip--text">
      <!-- Chip text -->
      Right-to-left Chip
    </span>
  </div>
</div>

Long text behaves the same as with the full chip: it will be truncated with an ellipsis and lines will not be wrapped.

<!-- Outer element is a <div>. -->
<div class="cdx-info-chip">
  <!-- Text element. -->
  <span class="cdx-info-chip--text">
    <!-- Chip text -->
    This is really really really really really really really really really
    really really really really really really really really really really really
    really really really long text
  </span>
</div>