LogoLockup
BrandingMark + wordmark lockup — horizontal (primary) or stacked orientation.
The illustrator supplies two composed lockups — use <LogoLockup /> when you need the mark and wordmark together with guaranteed kerning. For standalone uses, prefer <Logo variant="mark" /> or <Wordmark /> directly.
Usage
import { LogoLockup } from "nosible-ux"
export default function Example() {
return <LogoLockup orientation="horizontal" size={64} />
}Examples
Horizontal vs stacked
On a branded background
Accessibility
Renders with role="img" and aria-label="Nosible". For decorative repeats inside larger brand panels, set aria-label="" so screen readers do not announce the brand multiple times.
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. |
orientation | LogoLockupOrientation | undefined | 'horizontal' | Arrangement of the mark relative to the wordmark. - `"horizontal"` — mark left, wordmark right (primary logo). - `"stacked"` — wordmark above, mark below. |
size | number | undefined | 32 | Height of the rendered logo, in pixels. Width is derived from the variant's intrinsic aspect ratio. |