Skip to main content
Bedrock Design System

Score

A typography component to render a score number value.

UsagePermalink to: Usage

Score is exclusively used to render score number values, eg. average or NPS.

It will render as a <span> element as default, but can be changed to any other element or React component with the as prop.

When to usePermalink to: When to use

  • Use it to render score values, eg. 5.5 or 83

When not to usePermalink to: When not to use

  • Do not use it to render any form for text content, or other number values, eg. street- or phone numbers.

ExamplesPermalink to: Examples

SizesPermalink to: Sizes

Score has five sizes: small, medium-small, medium (default), large and xlarge.

Open
import { Score } from "@peakon/bedrock/react/typography";
import { Stack } from "@peakon/bedrock/react/layout";

function Snippet() {
  return (
    <Stack spacing={8}>
      <Score size="small">4.20</Score>
      <Score size="medium-small">4.20</Score>
      <Score size="medium">4.20</Score>
      <Score size="large">4.20</Score>
      <Score size="xlarge">4.20</Score>
    </Stack>
  );
}

Text alignmentPermalink to: Text alignment

Score will inherit text alignment from their parent, but can be overwritten with the textAlign prop.

Open
import { Score } from "@peakon/bedrock/react/typography";

function Snippet() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
      <Score textAlign="start">4.20</Score>
      <Score textAlign="center">4.20</Score>
      <Score textAlign="end">4.20</Score>
    </div>
  );
}

As another elementPermalink to: As another element

Open
import { Score } from "@peakon/bedrock/react/typography";

function Snippet() {
  return <Score as="div">4.20</Score>;
}

Props TablePermalink to: Props Table

Props extend from HTML Span Element(external link), with the omission of className and style

NameTypeDescriptionDefaultRequired
refany

Forwards a ref to the Score.

—No
asHTMLElement | ReactNode

What to render the Score as.

spanNo
sizesmall | medium-small | medium | large | xlarge

Size of the Score.

mediumNo
textAlignstart | center | end

How the text should align (will inherit as default).

—No