Typography

Typography

The Typography component provides consistent text styles across the application. It supports different heading and body variants, semantic HTML elements, text alignment, colors, and truncation.

import Typography from "rocksolidjs/Typography";

export default function Example() {
  return (
    <div class="flex flex-col gap-1">
      <Typography variant="h4">Welcome back</Typography>
      <Typography color="textSecondary">
        Here’s a quick overview of your account.
      </Typography>
    </div>
  );
}

Examples

Variants

Use the variant prop to control the visual style and size of the text.

import { For } from "solid-js";
import Typography from "rocksolidjs/Typography";

const variants = [
  { variant: "h1", label: "Heading 1" },
  { variant: "h2", label: "Heading 2" },
  { variant: "h3", label: "Heading 3" },
  { variant: "h4", label: "Heading 4" },
  { variant: "h5", label: "Heading 5" },
  { variant: "h6", label: "Heading 6" },
  { variant: "body1", label: "Body 1" },
  { variant: "body2", label: "Body 2" },
  { variant: "code", label: "const greeting = 'Hello';" },
];

export default function Example() {
  return (
    <div class="flex flex-col gap-4">
      <For each={variants}>
        {(item) => (
          <Typography variant={item.variant as any}>
            {item.label}
          </Typography>
        )}
      </For>
    </div>
  );
}

Colors

Use the color prop to communicate different meanings or visual hierarchies.

import { For } from "solid-js";
import Typography from "rocksolidjs/Typography";

const colors = [
  "default",
  "textPrimary",
  "textSecondary",
  "textTertiary",
  "success",
  "warning",
  "info",
  "error",
  "disabled",
] as const;

export default function Example() {
  return (
    <div class="flex flex-col gap-2">
      <For each={colors}>
        {(color) => (
          <Typography color={color}>
            {color}
          </Typography>
        )}
      </For>
    </div>
  );
}

Alignment

Use the align prop to control the horizontal alignment of text.

import { For } from "solid-js";
import Typography from "rocksolidjs/Typography";

const alignments = ["left", "center", "right", "justify"] as const;

export default function Example() {
  return (
    <div class="flex flex-col gap-4 w-full max-w-sm">
      <For each={alignments}>
        {(align) => (
          <Typography align={align} class="border p-2">
            {align} alignment
          </Typography>
        )}
      </For>
    </div>
  );
}

Truncation

Use the truncate prop to prevent long text from overflowing its container.

import Typography from "rocksolidjs/Typography";

export default function Example() {
  return (
    <div class="max-w-xs">
      <Typography truncate>
        This is a long piece of text that will be truncated when it does
        not fit within the available space.
      </Typography>
    </div>
  );
}

Custom Element

Use the as prop to control the semantic HTML element rendered by the component.

import Typography from "rocksolidjs/Typography";

export default function Example() {
  return (
    <div class="flex flex-col gap-2">
      <Typography variant="h3" as="p">
        A heading style rendered as a paragraph
      </Typography>
      <Typography variant="body1" as="span">
        Body text rendered as a span.
      </Typography>
    </div>
  );
}

The as prop can be used when the visual variant and semantic HTML element need to be different. For example, a body1 style can be rendered as a span element.

Accessibility

  • Use heading variants and semantic elements to maintain a logical document structure.
  • Use headings in the correct order rather than choosing a heading variant only for its visual appearance.
  • Do not rely on color alone to communicate meaning.
  • Ensure text has sufficient contrast against its background.
  • Use truncate only when the complete text is available through another accessible mechanism when necessary.

API

Typography

The Typography component supports text variants, semantic elements, colors, alignment, and text truncation.

Prop Type Required Default Description
align "inherit" | "left" | "center" | "right" | "justify" No "inherit" Controls the horizontal alignment of the text.
as string No Based on variant Controls the semantic HTML element rendered by the component.
class string No — Adds custom CSS classes to the Typography component.
color "inherit" | "default" | "success" | "warning" | "info" | "error" | "textPrimary" | "textSecondary" | "textTertiary" | "disabled" No "inherit" Controls the color of the text.
variant "inherit" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body1" | "body2" | "code" No "body2" Controls the visual typography style of the text.
truncate boolean No false Truncates overflowing text when enabled.
  • Link — Use for navigational text.
  • Button — Use for actions that require user interaction.