SNumber <s-number>

Displays a number you have already formatted, with typography, tone and color styling. SNumber is the typed Vue 3 wrapper for Shopify's Polaris <s-number> web component.

import { SNumber } from 'polaris-vue-elements'

Best practices

• Wrap only the figure. Put the numeric value itself in SNumber and leave the words around it in SText or SParagraph. Tabular digits align figures neatly but make regular words look uneven.
• Format values in your app first. SNumber controls how digits look, not how the value is formatted, so add currency symbols, decimals and thousands separators yourself to match the merchant's locale.
• Use tone only when the figure has a status. Set tone when the number itself signals something, such as stock that has run out. Toning every figure means none of them stands out.
• Size figures by importance. Give the number merchants should read first, like a total, a larger fontSize, and leave secondary figures at the default size.

<SText>Total: </SText><SNumber fontSize="large">$1,240.50</SNumber>
<SText>In stock: </SText><SNumber tone="critical">0</SNumber>

See Shopify's best practices for <s-number> for the full guidance.

Example

$1,280.50$342.00-$58.25$0.00

ProductTotalSnowboard$1,280.50Ski boots$342.00Poles$58.25

<script setup>
import { SNumber, STable, STableHeaderRow, STableHeader, STableBody, STableRow, STableCell } from 'polaris-vue-elements'

const currency = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
const revenue = [
  { product: 'Snowboard', total: 1280.5 },
  { product: 'Ski boots', total: 342 },
  { product: 'Poles', total: 58.25 },
]
</script>

<template>
  <!-- SNumber's default slot renders the value as given — format and localize it yourself. -->
  <SNumber fontSize="large-100" fontWeight="bold">{{ currency.format(1280.5) }}</SNumber>
  <SNumber tone="success" fontWeight="semibold">{{ currency.format(342) }}</SNumber>
  <SNumber tone="critical" fontWeight="semibold">{{ currency.format(-58.25) }}</SNumber>
  <SNumber color="subdued" fontSize="small">{{ currency.format(0) }}</SNumber>

  <!-- tabular numerals line up nicely in a table column -->
  <STable variant="auto">
    <STableHeaderRow>
      <STableHeader listSlot="primary">Product</STableHeader>
      <STableHeader format="currency">Total</STableHeader>
    </STableHeaderRow>
    <STableBody>
      <STableRow v-for="row in revenue" :key="row.product">
        <STableCell>{{ row.product }}</STableCell>
        <STableCell><SNumber>{{ currency.format(row.total) }}</SNumber></STableCell>
      </STableRow>
    </STableBody>
  </STable>
</template>

Props

Prop	Type	Description
accessibilityVisibility	"visible" | "hidden" | "exclusive"	Changes the visibility of the element. - visible: the element is visible to all users. - hidden: the element is removed from the accessibility tree but remains visible. - exclusive: the element is visually hidden but remains in the accessibility tree.
color	"subdued" | "base"	The color emphasis applied to the number. - base: Standard emphasis for numeric content. - subdued: Deemphasized color for secondary or supporting numeric content.
dir	"auto" | "ltr" | "rtl"	Indicates the directionality of the element’s text. - ltr: languages written from left to right (e.g. English) - rtl: languages written from right to left (e.g. Arabic) - auto: the user agent determines the direction based on the content - '': direction is inherited from parent elements (equivalent to not setting the attribute)
fontSize	"base" | "auto" | "small-200" | "small-100" | "small" | "large" | "large-100"	Font size of the number. The named values also apply their matching line-height and letter-spacing.
fontWeight	"base" | "auto" | "medium" | "semibold" | "bold"	Font weight of the number.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	The semantic tone that's applied to the number, which changes its color to convey meaning. - info: Informational content or helpful tips (blue). - success: Positive outcomes or successful states (green). - warning: Important warnings about potential issues (orange). - critical: Urgent problems or destructive actions (red). - auto: Automatically determined based on context. - neutral: General information without specific intent (gray). - caution: Advisory notices that need attention (yellow).

Slots

Slot	Description
default	The number to display. The component styles the value you pass in — typography, tone, and color — and renders it as given, so format and localize it yourself.