Components/Branding/Wordmark

Wordmark

Branding

Convenience wrapper — renders the "NOSIBLE" wordmark via Logo.

Shortcut for the most common logo usage — the wordmark on its own, used in topbars, footers, and side-by-side navigation lockups.

Same API as <Logo /> minus the variant prop.

Usage

import { Wordmark } from "nosible-ux"

export default function Example() {
  return <Wordmark size={24} color="var(--c-text)" />
}

Examples

Topbar size

/ux

Brand-coloured

Accessibility

Inherits role="img" and aria-label="Nosible" from <Logo />. Override aria-label when the wordmark sits beside another "Nosible" label to avoid announcing the brand name twice.

Props

Name	Type	Default	Description
`aria-label`	`string \| undefined`	—	Accessible label. Set to an empty string for purely decorative uses.
`color`	`string \| undefined`	`'currentColor'`	Fill colour. `"currentColor"` tracks the parent's text colour — ideal for single-colour uses on Obsidian, White, or brand-coloured backgrounds.
`size`	`number \| undefined`	`32`	Height of the rendered logo, in pixels. Width is derived from the variant's intrinsic aspect ratio.

← All Components Getting Started →