InfoChip

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

Guidelines

When to use 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.

Component limitations

The InfoChip label should be kept concise. It's limited to one line of text, and if it exceeds this limit, it will be truncated with an ellipsis, with no text wrapping.

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.

Best practices

Consider the following recommendations when using info chips.

Usage

Do:

• Use InfoChip to provide additional information within other components like Accordion.

Don't:

• Use InfoChip as a standalone chip on a page.

Notice chips

Do:

• Utilize the start icon in notice chips when needed to strengthen the text, or hide it if not required.
• Replace the Notice icon with any other that complements the chip's meaning.

Don't:

• Use icons with complex meanings to prevent user confusion and frustration.
• Use icons selectively within a group of chips.

Success, warning, and error chips

Do:

• Use the designated feedback icons for success, warning, and wrror chips.
• Customize the label if needed.

Don't:

• Remove the icon in success, warning, and error chips, as it is crucial for indicating their statuses.
• Replace the icon in success, warning, and error chips, as it reinforces the meaning of their respective statuses.

Demos

Configurable

Info Chip

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

Name	Value
Props
icon
status	notice warning error success
Slots
default
View
Reading direction	Left to right (LTR) Right to left (RTL)
Note: For icon properties, the relevant icon also needs to be imported from the @wikimedia/codex-icons package. See the usage documentation for more information.

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.

Photos

NPM

<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>

MediaWiki

<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' );

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.

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

NPM

<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>

MediaWiki

<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' );

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

Vue usage

Props

Prop name	Description	Type	Values	Default
status	Status type.	StatusType	'notice', 'warning', 'error', 'success'	'notice'
icon	Custom icon to use for "notice" chips. Chips with other status types (warning, etc) do not allow custom icons and will ignore this option.	Icon	-	null

Slots

Name	Description	Bindings
default	Chip content.

CSS-only version

Markup structure

Text only

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

Info Chip

<!-- 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.

Right-to-left Chip

<!-- 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.

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

<!-- 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>

Status types

There are four status types, "notice", "warning", "error", and "success".

Apply the following classes to the root element to define the status styles:

• Notice: cdx-info-chip--notice (class can be omitted since this is the default)
• Warning: cdx-info-chip--warning
• Error: cdx-info-chip--error
• Success: cdx-info-chip--success

Status icons

Each status has a corresponding default icon (cdxIconInfoFilled for "notice" status, cdxIconAlert for "warning" status, cdxIconError for "error" status, and cdxIconSuccess for "success" status). Examples of the default icons can be found below.

To use the default icon for a given chip status, simply include an empty <span> element with the class cdx-info-chip__icon inside the chip element.

Notice

Warning

Error

Success

<!-- Outer element is a <div> with the default "notice" class. -->
<div class="cdx-info-chip cdx-info-chip--notice">
  <!-- Icon element. -->
  <span class="cdx-info-chip__icon"></span>
  <!-- Text element. -->
  <span class="cdx-info-chip__text">
    <!-- Chip text -->
    Notice
  </span>
</div>
<!-- Outer element is a <div> with the "warning" class. -->
<div class="cdx-info-chip cdx-info-chip--warning">
  <span class="cdx-info-chip__icon"></span>
  <span class="cdx-info-chip__text"> Warning </span>
</div>
<!-- Outer element is a <div> with the "error" class. -->
<div class="cdx-info-chip cdx-info-chip--error">
  <span class="cdx-info-chip__icon"></span>
  <span class="cdx-info-chip__text"> Error </span>
</div>
<!-- Outer element is a <div> with the "success" class. -->
<div class="cdx-info-chip cdx-info-chip--success">
  <span class="cdx-info-chip__icon"></span>
  <span class="cdx-info-chip__text"> Success </span>
</div>

Custom icons

You can customize the icon by using the CSS-only Icon Less mixin(.cdx-mixin-css-icon) to apply the icon styles, passing the appropriate parameters to the mixin.

Custom icons should only be used with "notice" status InfoChips.

Notice

Photos

Users

Articles

<div class="cdx-info-chip cdx-info-chip--notice">
  <!-- Custom icon element. -->
  <span class="cdx-demo-css-icon--heart"></span>
  <span class="cdx-info-chip__text"> Notice </span>
</div>
<div class="cdx-info-chip cdx-info-chip--notice">
  <!-- Custom icon element. -->
  <span class="cdx-demo-css-icon--camera"></span>
  <span class="cdx-info-chip__text"> Photos </span>
</div>
<div class="cdx-info-chip cdx-info-chip--notice">
  <!-- Custom icon element. -->
  <span class="cdx-demo-css-icon--user"></span>
  <span class="cdx-info-chip__text"> Users </span>
</div>
<div class="cdx-info-chip cdx-info-chip--notice">
  <!-- Custom icon element. -->
  <span class="cdx-demo-css-icon--article"></span>
  <span class="cdx-info-chip__text"> Articles </span>
</div>

NPM

// Note: Import the design tokens before importing the css-icon mixin
@import (reference) "@wikimedia/codex-design-tokens/theme-wikimedia-ui.less";
@import (reference) "@wikimedia/codex/mixins/css-icon.less";

.cdx-demo-css-icon--heart {
  .cdx-mixin-css-icon( @cdx-icon-heart, @color-icon-notice, @size-icon-small );
}

.cdx-demo-css-icon--camera {
  .cdx-mixin-css-icon( @cdx-icon-camera, @color-icon-notice, @size-icon-small );
}

.cdx-demo-css-icon--user {
  .cdx-mixin-css-icon( @cdx-icon-user-avatar, @color-icon-notice, @size-icon-small );
}

.cdx-demo-css-icon--article {
  .cdx-mixin-css-icon( @cdx-icon-article, @color-icon-notice, @size-icon-small );
}

MediaWiki

@import "mediawiki.skin.variables.less";

.cdx-demo-css-icon--heart {
  .cdx-mixin-css-icon( @cdx-icon-heart, @color-icon-notice, @size-icon-small );
}

.cdx-demo-css-icon--camera {
  .cdx-mixin-css-icon( @cdx-icon-camera, @color-icon-notice, @size-icon-small );
}

.cdx-demo-css-icon--user {
  .cdx-mixin-css-icon( @cdx-icon-user-avatar, @color-icon-notice, @size-icon-small );
}

.cdx-demo-css-icon--article {
  .cdx-mixin-css-icon( @cdx-icon-article, @color-icon-notice, @size-icon-small );
}