MdkWordmark
MDK wordmark — the canonical brand lockup, rendered as inline SVG so it tints to `currentColor`. Use this in `AppHeader` (via the `logo` slot) or anywhere el…
MDK wordmark — the canonical brand lockup, rendered as inline SVG so it tints to currentColor. Use this in <AppHeader> (via the logo slot) or anywhere else the brand should appear.
import { MdkWordmark } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
size | Optional | MdkWordmarkSize | undefined | — | Visual size of the wordmark. `sm` ≈ 24px tall, `md` ≈ 32px, `lg` ≈ 64px. |
className | Optional | string | undefined | — | Optional class hook on the outer `<svg>`. |
title | Optional | string | undefined | — | Accessible label. Defaults to "MDK". |
Usage
The canonical MDK brand lockup, rendered as inline SVG so it tints to
currentColor. Use it in <AppHeader> via the logo slot, on
sign-in pages, or anywhere else the brand should appear.
When to use
- You need the MDK lockup at a known size (sm / md / lg).
- The surrounding text color or design token should drive the brand color
via
currentColor.
Example
import { MdkWordmark } from './index'/** * Three sizes of the MDK wordmark, tinting to `currentColor`. */export const MdkWordmarkExample = (): React.ReactNode => ( <div className="mdk-wordmark-example"> <MdkWordmark size="sm" /> <MdkWordmark size="md" /> <MdkWordmark size="lg" /> </div>)