Skip to main content
Bedrock Design System

Small Info

A typography component to render short info texts

UsagePermalink to: Usage

Small Info is a typography component that is used to display short info texts on pages.

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 for short informative messages

When not to usePermalink to: When not to use

  • Do not use it to display paragraphs or headings

ExamplesPermalink to: Examples

BoldPermalink to: Bold

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

function Snippet() {
  return (
    <Stack spacing={8}>
      <SmallInfo>Small info non-bold (default)</SmallInfo>
      <SmallInfo bold>Small info bold</SmallInfo>
    </Stack>
  );
}

Text colorPermalink to: Text color

The textColor prop controls the color of the text.

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

function Snippet() {
  return (
    <Stack spacing={8}>
      <SmallInfo textColor="heading">Heading color</SmallInfo>
      <SmallInfo textColor="body">Body color (default)</SmallInfo>
      <SmallInfo textColor="hint">Hint color</SmallInfo>
      <SmallInfo textColor="disabled">Disabled color</SmallInfo>
      <div style={{ backgroundColor: "black", padding: "8px" }}>
        <SmallInfo textColor="inverted">Inverted color</SmallInfo>
      </div>
      <SmallInfo textColor="inherit">Inherit color (from parent)</SmallInfo>
    </Stack>
  );
}

Text alignmentPermalink to: Text alignment

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

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

function Snippet() {
  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <SmallInfo textAlign="start">Small Info aligned to start</SmallInfo>
      <SmallInfo textAlign="center">Small Info aligned center</SmallInfo>
      <SmallInfo textAlign="end">Small Info aligned to end</SmallInfo>
    </div>
  );
}

As another elementPermalink to: As another element

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

function Snippet() {
  return (
    <SmallInfo as="div">Small Info rendered as a HTML Div Element</SmallInfo>
  );
}

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 Small Info.

—No
asHTMLElement | ReactNode

What to render the Small Info as.

spanNo
boldboolean

Whether the text should be bold.

falseNo
textAlignstart | center | end

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

—No
textColorinherit | heading | body | hint | inverted | disabled

Controls the color of the text.

bodyNo