Count

Numeric message indicating an amount.

UsageGuidelinesAPI

Counts are numeric messages that indicate a quantity.

Skins

ReactVanilla

<>
  Alert:{' '}
  <Count ml={2} skin="alert">
    42
  </Count>
</>

<>
  Alert:{' '}
  <Count ml={2} skin="alert">
    42
  </Count>
</>

Alert: <span class="swan-count swan-count-skin-alert swan-ml-2">42</span>

Alert: <span class="swan-count swan-count-skin-alert swan-ml-2">42</span>

Samples

ReactVanilla

<GridContainer>
  <Row>
    <Column span={3}>
      <FlexBox alignItems="center">
        <Icon iconType="shoppingBag_0" size="32p" />
        <Span>Cart</Span>
        <Count style={{ alignSelf: 'flex-start' }}>42</Count>
      </FlexBox>
    </Column>
    <Column span={3}>
      <Box>
        Likes
        <Count>20</Count>
      </Box>
    </Column>
    <Column span={3}>
      <FlexBox style={{ height: '100%' }} alignItems="center">
        <Icon iconType="delete" size="24p" />
        Bin
        <Count skin="alert" style={{ alignSelf: 'flex-start' }}>
          12
        </Count>
      </FlexBox>
    </Column>
    <Column span={3}>
      <FlexBox style={{ height: '100%' }} alignItems="center">
        <RatingsStars
          ratingValue={3.5}
          aria-label="Rating: 3.5 out of 5 stars"
        />
        <Count ml={2}> 3.5 </Count>
      </FlexBox>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={3}>
      <FlexBox alignItems="center">
        <Icon iconType="shoppingBag_0" size="32p" />
        <Span>Cart</Span>
        <Count style={{ alignSelf: 'flex-start' }}>42</Count>
      </FlexBox>
    </Column>
    <Column span={3}>
      <Box>
        Likes
        <Count>20</Count>
      </Box>
    </Column>
    <Column span={3}>
      <FlexBox style={{ height: '100%' }} alignItems="center">
        <Icon iconType="delete" size="24p" />
        Bin
        <Count skin="alert" style={{ alignSelf: 'flex-start' }}>
          12
        </Count>
      </FlexBox>
    </Column>
    <Column span={3}>
      <FlexBox style={{ height: '100%' }} alignItems="center">
        <RatingsStars
          ratingValue={3.5}
          aria-label="Rating: 3.5 out of 5 stars"
        />
        <Count ml={2}> 3.5 </Count>
      </FlexBox>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-3">
      <div class="swan-display-flex" style="align-items: center;">
        <img
          alt="shoppingBag_0"
          src="https://swan.prod.merch.vpsvc.com/v0.0.6-main.2-hashed/icons/shopping_bag_0.c8e9cc7aaa885ad789cd1d30bd0dfe8b.svg"
          class="swan-icon swan-icon-size-32p"
        /><span>Cart</span
        ><span class="swan-count" style="align-self: flex-start;">42</span>
      </div>
    </div>
    <div class="swan-col-3">
      <div>Likes <span class="swan-count">20</span></div>
    </div>
    <div class="swan-col-3">
      <div class="swan-display-flex" style="height: 100%; align-items: center;">
        <img
          alt="delete"
          src="https://swan.prod.merch.vpsvc.com/v0.0.6-main.2-hashed/icons/delete.d567f5a6c914b5d96f5552eb8df8b94f.svg"
          class="swan-icon swan-icon-size-24p"
        />Bin
        <span
          class="swan-count swan-count-skin-alert"
          style="align-self: flex-start;"
          >12</span
        >
      </div>
    </div>
    <div class="swan-col-3">
      <div class="swan-display-flex" style="height: 100%; align-items: center;">
        <div aria-label="Rating: 3.5 out of 5 stars" class="swan-ratings">
          <span class="swan-ratings-star swan-ratings-star-filled"></span
          ><span class="swan-ratings-star swan-ratings-star-filled"></span
          ><span class="swan-ratings-star swan-ratings-star-filled"></span
          ><span class="swan-ratings-star swan-ratings-star-filled-p5"></span
          ><span class="swan-ratings-star"></span>
        </div>
        <span class="swan-count swan-ml-2"> 3.5 </span>
      </div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-3">
      <div class="swan-display-flex" style="align-items: center;">
        <img
          alt="shoppingBag_0"
          src="https://swan.prod.merch.vpsvc.com/v0.0.6-main.2-hashed/icons/shopping_bag_0.c8e9cc7aaa885ad789cd1d30bd0dfe8b.svg"
          class="swan-icon swan-icon-size-32p"
        /><span>Cart</span
        ><span class="swan-count" style="align-self: flex-start;">42</span>
      </div>
    </div>
    <div class="swan-col-3">
      <div>Likes <span class="swan-count">20</span></div>
    </div>
    <div class="swan-col-3">
      <div class="swan-display-flex" style="height: 100%; align-items: center;">
        <img
          alt="delete"
          src="https://swan.prod.merch.vpsvc.com/v0.0.6-main.2-hashed/icons/delete.d567f5a6c914b5d96f5552eb8df8b94f.svg"
          class="swan-icon swan-icon-size-24p"
        />Bin
        <span
          class="swan-count swan-count-skin-alert"
          style="align-self: flex-start;"
          >12</span
        >
      </div>
    </div>
    <div class="swan-col-3">
      <div class="swan-display-flex" style="height: 100%; align-items: center;">
        <div aria-label="Rating: 3.5 out of 5 stars" class="swan-ratings">
          <span class="swan-ratings-star swan-ratings-star-filled"></span
          ><span class="swan-ratings-star swan-ratings-star-filled"></span
          ><span class="swan-ratings-star swan-ratings-star-filled"></span
          ><span class="swan-ratings-star swan-ratings-star-filled-p5"></span
          ><span class="swan-ratings-star"></span>
        </div>
        <span class="swan-count swan-ml-2"> 3.5 </span>
      </div>
    </div>
  </div>
</div>

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

Was this page useful?

Published: Jan 31, 2022Last updated: Sep 3, 2024

Convenience Elements

Divider