Count
A small tabular count for tabs, filter pills and badges.
<mm-count value="14"></mm-count>
<mm-count value="1284019" compact></mm-count>
<mm-count value="140" max="99" label="140 unread notifications"></mm-count>
Guidance
The count used by tabs, filter pills and badge counts: a number in the text face with tabular
figures, quieter than the label it sits beside, and always numerals. Over max it shows 99+; with
compact large numbers shorten to 1.28M. On an ink-filled selected filter pill use the inverse
tone.
A bare count reads as just a number. When the number is not explained by the text beside it (a
badge on a bell, for example), give label the full sentence, such as "12 unread notifications".
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
value | value | number | undefined | The number to show. Nothing renders when it is not a number. | |
max | max | number | undefined | Above this, shows max+ (for example 99+). | |
compact | compact | boolean | false | Shortens large numbers: 1284019 becomes 1.28M. |
tone | tone | 'default' | 'inverse' | 'default' | default (muted ink) or inverse (on an ink-filled selected filter pill). |
label | label | string | '' | Full accessible text, such as "12 unread notifications". The visible number is then hidden from assistive technology. |
display | string | The text shown, for example 1,284, 1.28M or 99+. |
CSS parts
| Part | Description |
|---|---|
count | The visible number. |
CSS custom properties
| Property | Description |
|---|---|
--mm-count-color | Overrides the colour, for example var(--mm-text-2) inside a selected row or on a raised layer. |
Examples
Every state of mm-count in Storybook, with keyboard and screen reader tests.