Skip to content
On this page

InfoChip

A non-interactive chip that provides information.

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

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.