InfoChip

An InfoChip is a non-interactive indicator that provides information and/or conveys a status.

Info Chip

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

Name	Value
Props
icon
status	subtle notice progressive 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.

Overview

When to use InfoChip

Use the InfoChip component to label, categorize, or organize information using keywords. This type of chip is informative so it cannot be clickable or removable.

Depending on the type of feedback conveyed to the user, InfoChips can be used to convey one of six statuses.

1. Subtle
   Use for subtle information that does not need to convey "status" or the need for additional visible attention — the most basic version of a small pill of information.
2. Notice
   Use to convey a general and non-urgent status. Think of this as a neutral version of warning, error, or success.
3. Progressive
   Use to convey a progressive status that draws extra attention but does not communicate cautionary, negative, or positive status.
4. Warning
   Use to convey a cautionary status.
5. Error
   Use to convey a negative status.
6. Success
   Use to convey a positive status.

About InfoChip

InfoChip includes the following elements.

Icon (optional)

For subtle, notice, and progressive chips, the icon is optional and customizable, while for chips providing feedback (warning, error, and success), the icon is required to communicate the feedback status effectively.

• Use a start icon in subtle, notice, and progressive chips when needed to strengthen the text, or hide it if not required.
• Avoid removing or replacing the icon in warning, error, and success chips, as it reinforces the meaning of their respective statuses.

Label

Descriptive text about the chip.

• Use short text with the InfoChip. Long text content will be truncated with an ellipsis and lines will not be wrapped.

Examples

With icon

For subtle, notice, and progressive chips, the icon can be customized.

Beta

Photos

In progress

NPM

<template>
	<div class="cdx-demo-info-chips">
		<div>
			<cdx-info-chip status="subtle" :icon="cdxIconLabFlask">
				Beta
			</cdx-info-chip>
		</div>
		<div>
			<cdx-info-chip :icon="cdxIconCamera">
				Photos
			</cdx-info-chip>
		</div>
		<div>
			<cdx-info-chip status="progressive" :icon="cdxIconEllipsis">
				In progress
			</cdx-info-chip>
		</div>
	</div>
</template>

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

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

<style lang="less">
@import ( reference ) '@wikimedia/codex-design-tokens/theme-wikimedia-ui.less';

.cdx-demo-info-chips {
	display: flex;
	flex-direction: column;
	gap: @spacing-100;
}
</style>

MediaWiki

<template>
	<div class="cdx-demo-info-chips">
		<div>
			<cdx-info-chip status="subtle" :icon="cdxIconLabFlask">
				Beta
			</cdx-info-chip>
		</div>
		<div>
			<cdx-info-chip :icon="cdxIconCamera">
				Photos
			</cdx-info-chip>
		</div>
		<div>
			<cdx-info-chip status="progressive" :icon="cdxIconEllipsis">
				In progress
			</cdx-info-chip>
		</div>
	</div>
</template>

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

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

<style lang="less">
@import 'mediawiki.skin.variables.less';

.cdx-demo-info-chips {
	display: flex;
	flex-direction: column;
	gap: @spacing-100;
}
</style>

Developer notes

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

Statuses

Use the status prop to create subtle, progressive, warning, error, and success InfoChips.

3 tests

New tests running

1 test has not run

2 tests are failing

All tests are passing

NPM

<template>
	<div class="cdx-demo-info-chips">
		<div>
			<cdx-info-chip status="subtle">
				3 tests
			</cdx-info-chip>
		</div>
		<div>
			<cdx-info-chip status="progressive">
				New tests running
			</cdx-info-chip>
		</div>
		<div>
			<cdx-info-chip status="warning">
				1 test has not run
			</cdx-info-chip>
		</div>
		<div>
			<cdx-info-chip status="error">
				2 tests are failing
			</cdx-info-chip>
		</div>
		<div>
			<cdx-info-chip status="success">
				All tests are passing
			</cdx-info-chip>
		</div>
	</div>
</template>

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

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

<style lang="less">
@import ( reference ) '@wikimedia/codex-design-tokens/theme-wikimedia-ui.less';

.cdx-demo-info-chips {
	display: flex;
	flex-direction: column;
	gap: @spacing-100;
}
</style>

MediaWiki

<template>
	<div class="cdx-demo-info-chips">
		<div>
			<cdx-info-chip status="subtle">
				3 tests
			</cdx-info-chip>
		</div>
		<div>
			<cdx-info-chip status="progressive">
				New tests running
			</cdx-info-chip>
		</div>
		<div>
			<cdx-info-chip status="warning">
				1 test has not run
			</cdx-info-chip>
		</div>
		<div>
			<cdx-info-chip status="error">
				2 tests are failing
			</cdx-info-chip>
		</div>
		<div>
			<cdx-info-chip status="success">
				All tests are passing
			</cdx-info-chip>
		</div>
	</div>
</template>

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

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

<style lang="less">
@import 'mediawiki.skin.variables.less';

.cdx-demo-info-chips {
	display: flex;
	flex-direction: column;
	gap: @spacing-100;
}
</style>

Technical implementation

Vue usage

Props

Prop name	Description	Type	Values	Default
status	Status type.	StatusType	'subtle', 'notice', 'progressive', '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>

Status types

There are size status types, "subtle", "notice", "progressive", "warning", "error", and "success".

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

• Subtle: cdx-info-chip--subtle
• Notice: cdx-info-chip--notice (class can be omitted since this is the default)
• Progressive: cdx-info-chip--progressive
• 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 "subtle", "notice", and "progressive" statuses, 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.

Subtle

Notice

Progressive

Warning

Error

Success

<!-- Outer element is a `<div>` with the default `--notice` class. -->
<div class="cdx-info-chip cdx-info-chip--subtle">
  <!-- Icon element. -->
  <span class="cdx-info-chip__icon"></span>
  <!-- Text element. -->
  <span class="cdx-info-chip__text">
    <!-- Chip text -->
    Subtle
  </span>
</div>
<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>
<div class="cdx-info-chip cdx-info-chip--progressive">
  <!-- Icon element. -->
  <span class="cdx-info-chip__icon"></span>
  <!-- Text element. -->
  <span class="cdx-info-chip__text">
    <!-- Chip text -->
    Progressive
  </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 "subtle", "notice", and "progressive" 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--progressive">
  <!-- 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--subtle">
  <!-- 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-progressive, @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-progressive, @size-icon-small );
}

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