Count

Numeric message indicating an amount.

UsageGuidelinesAPI

ReactVanilla

<Count>42</Count>

<Count>42</Count>

<span class="swan-count">42</span>

<span class="swan-count">42</span>

Skins

Standard

Use skin="standard" for non-critical messages. This is the default skin.

ReactVanilla

<Count skin="standard">42</Count>

<Count skin="standard">42</Count>

<span class="swan-count">42</span>

<span class="swan-count">42</span>

Alert

Use skin="alert" for error or critical messages.

ReactVanilla

<Count skin="alert">42</Count>

<Count skin="alert">42</Count>

<span class="swan-count swan-count-skin-alert">42</span>

<span class="swan-count swan-count-skin-alert">42</span>

Best practices

Counts should be no more than two digits.
Counts are used to indicate the number of items in your cart, saved items in a gallery, times liked, tweeted, rated, reviewed, etc.
Use the "alert" skin to call particular attention and encourage action.

Accessibility

Users on assistive devices may not have the full context for what the count number represents. Consider adding visually hidden text inside of the Count if the context isn't already clear. For instance, if a Count of 4 represents 4 items in the cart, add the visually hidden text "Items" after the number.

Props

See core props for additional props that can be applied to each of these components. Each component also accepts the React-equivalent native HTML attributes of the element it renders, unless a listed prop replaces one or a note says otherwise.

Count

Renders <span>.

prop	type	required	default
`skin` which skin to use. Standard uses the vista blue and Alert uses the red alert color	`"standard""alert"null`	false	standard