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" className="h-6 w-auto" />;

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

export default () => (
  <Logo logoType="logomark" aria-label="Scribe" className="h-6 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 renders an external SVG image, so text color utilities do not 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.

---

className

string

Classes applied to the root wordmark SVG. Text color classes set the default logo color. Classes applied to the root logomark image. Use for sizing and layout; text color classes do not affect the SVG image.

---

glyphClassName

string

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

---

logoType

"wordmark" | "logomark"

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.

---