Count | Components

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

Count

This component is implemented using the <span /> as the root element. You can utilize the native attributes supported by <span /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

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