SNumber <s-number>

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

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.