InfoChip | Codex
Skip to content
InfoChip
An InfoChip is a non-interactive indicator that provides information and/or conveys a status.
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.
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.
Notice
Use to convey a general and non-urgent status. Think of this as a neutral version of warning, error, or success.
Progressive
Use to convey a progressive status that draws extra attention but does not communicate cautionary, negative, or positive status.
Warning
Use to convey a cautionary status.
Error
Use to convey a negative status.
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
MediaWiki
vue
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
vue
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
MediaWiki
vue
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
vue
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
html
div
class
cdx-info-chip
span
class
cdx-info-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
element with the class
cdx-info-chip__icon
inside the chip element.
Subtle
Notice
Progressive
Warning
Error
Success
html
div
class
cdx-info-chip cdx-info-chip--subtle
span
class
cdx-info-chip__icon
>span
span
class
cdx-info-chip__text
Subtle
span
div
div
class
cdx-info-chip cdx-info-chip--notice
span
class
cdx-info-chip__icon
>span
span
class
cdx-info-chip__text
Notice
span
div
div
class
cdx-info-chip cdx-info-chip--progressive
span
class
cdx-info-chip__icon
>span
span
class
cdx-info-chip__text
Progressive
span
div
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
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
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
html
div
class
cdx-info-chip cdx-info-chip--notice
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
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
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
span
class
cdx-demo-css-icon--article
>span
span
class
cdx-info-chip__text
> Articles span
div
NPM
MediaWiki
less
// 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
less
@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
US