Logo

Usage

import { Logo } from "stylus-ui/Logo";

export default () => <Logo className="max-w-24" />;

Use logoType="logomark" when you need the compact Scribe mark in small navigation or sidebar contexts. The logomark renders as a decorative image by default. When using it inside an icon-only control, provide the accessible label on the control itself. When the logomark is standalone meaningful content, provide aria-label.

import { Logo } from "stylus-ui/Logo";

export default () => (
  <Logo logoType="logomark" aria-label="Scribe" className="h-6 w-auto" />
);

Use logoType="stacked" for the vertical lockup — the Scribe mark above the wordmark — in compact, centered placements like sign-in screens or cards. Like the logomark, it is decorative by default; pass aria-label when it stands alone as meaningful content.

import { Logo } from "stylus-ui/Logo";

export default () => (
  <Logo logoType="stacked" aria-label="Scribe" className="h-24 w-auto" />
);

Color

The wordmark will automatically adopt the current color of text. To change the wordmark color, change the text color with className. The wordmark and glyph can be styled independently with wordmarkClassName and glyphClassName. The logomark variant also fills with currentColor, so text color utilities on className (or an ancestor) change its color.

import { Logo } from "stylus-ui/Logo";

export default () => (
  <Logo
    className="max-w-24"
    wordmarkClassName="text-slate-900 dark:text-slate-50"
    glyphClassName="text-brand-600"
  />
);

Sizing

The logo will consume available width. Resize it by putting it in a smaller container or passing a max-width or max-height to className.

import { Logo } from "stylus-ui/Logo";

export default () => <Logo className="max-w-24" />;

The logomark variant follows the same sizing pattern. Control its dimensions from the parent or with width and height utilities.

import { Logo } from "stylus-ui/Logo";

export default () => <Logo logoType="logomark" className="h-6 w-auto" />;

API Reference

Logo

Display the Scribe logo.

aria-label

string

Accessible label for standalone logomarks. Omit when the logomark is decorative. Accessible label for standalone stacked lockups. Omit when the lockup is decorative.

---

className

string

Classes applied to the root wordmark SVG. Text color classes set the default logo color. Classes applied to the root logomark SVG. Text color classes set the default logo color. Classes applied to the root stacked SVG. Text color classes set the default logo color.

---

glyphClassName

string

Classes applied to the scribe glyph (icon) paths. Only applied when logoType is wordmark.

---

logoType

"wordmark" | "logomark" | "stacked"

Logo variant to render. Defaults to wordmark. Logo variant to render.

---

wordmarkClassName

string

Classes applied to the “Scribe” wordmark paths. Only applied when logoType is wordmark.

---