Skip to content
On this page

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.

Example of a Codex InfoChip.

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

Specifications

Specification of InfoChip.

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.

Chips with long text whose length grows with the chip's text.

Example of chips with short text and fixed width.


 

Types

Types of chip based on its feedback status: notice, success, warning and error.

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.

Example of notice chips with and without start icons.

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.

Example of a success, warning, and error chip.

Refer to the InfoChip component in Codex Figma.

Interaction states

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

Demos

Configurable

Info Chip
NameValue
Props
icon
status
Slots
default
View
Reading direction
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

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

Vue usage

Props

Prop nameDescriptionTypeValuesDefault
statusStatus type.StatusType'notice', 'warning', 'error', 'success''notice'
iconCustom 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

NameDescriptionBindings
defaultChip content.