Brand

A compact logo + name combo for the leading slot of a <x-wirekit::header> or a sidebar. Brand renders an <a> element that doubles as the "home" link of your app — click the logo to return to / (or a custom href).

Basic Usage

Pass name for a text-only brand, logo for an image-only brand, or both for a combined mark. The logo image is decorative (alt="", aria-hidden="true"); the accessible name of the link comes from name when present.

Text-only brand

Acme

<x-wirekit::brand name="Acme" />

Logo + name

Acme

<x-wirekit::brand
    logo="/placeholder/1c608019/32x32?bg=4f46e5&fg=ffffff&label=A&gradient=none"
    name="Acme"
/>

Logo only

<x-wirekit::brand
    logo="/placeholder/1c608019/120x32?bg=0f172a&fg=ffffff&label=ACME&gradient=none"
/>

Custom Link Target

By default the brand links to /. Use href="…" to point it elsewhere (landing page, marketing site, app root in multi-root setups).

Brand linking to /dashboard

Admin

<x-wirekit::brand name="Admin" href="/dashboard" />

Custom Content

If you need more than a logo and name (e.g. a workspace switcher chevron, a product badge), pass arbitrary children. When children are present, logo and name are ignored.

Brand with custom slot

Acme Pro

<x-wirekit::brand href="/workspaces/acme">
    <span style="font-weight: 600; color: var(--color-wk-text);">Acme</span>
    <x-wirekit::badge surface="soft" intent="info">Pro</x-wirekit::badge>
</x-wirekit::brand>

Props

Prop	Type	Default	Description
`logo`	`string\|null`	`null`	URL of the canonical wide-form logo image. Rendered at `h-8 w-auto`. Decorative — `alt=""`, `aria-hidden="true"`.
`mobileLogo`	`string\|null`	`null`	Optional URL of a compact mobile variant (square mark, monogram, icon-only). When set together with `logo`, the component renders TWO `<img>` tags with a Tailwind responsive swap — mobile shows the compact variant, wider viewports show the canonical `logo`. When unset, behavior is unchanged.
`mobileBreakpoint`	`'sm'\|'md'\|'lg'\|'xl'`	`'sm'`	The Tailwind breakpoint at which the responsive swap flips from `mobileLogo` to `logo`. Default `sm` (640 px) — wide wordmarks typically clear sm+ viewports. No-op when `mobileLogo` is null. Invalid values throw in debug mode.
`darkLogo`	`string\|null`	`null`	Optional URL of a dark-mode logo variant. When set with `logo`, the component renders a light/dark `<img>` pair that swaps automatically under the `.dark` class (via the `wk-light-only` / `wk-dark-only` visibility classes — never a `dark:` utility). Composes with `mobileLogo`: the mobile mark stays mode-neutral, the light/dark swap applies to the desktop logo. When unset, behavior is unchanged.
`name`	`string\|null`	`null`	Brand name text. Rendered at `--text-wk-lg` with heading-weight font.
`href`	`string`	`'/'`	Link destination.
`scope`	`string\|null`	`null`	Named personalization scope for block-level class overrides.

When neither logo nor name is set, the component falls back to rendering the default slot — pass your own markup for full control.

Responsive logo example

A wide wordmark on the home navbar overflows narrow viewports — mobileLogo swaps it for a compact mark below the chosen breakpoint:

Brand with a wordmark

<x-wirekit::brand
    logo="/placeholder/1c608019/120x32?bg=0f172a&fg=ffffff&label=ACME&gradient=none"
    mobileLogo="/placeholder/1c608019/32x32?bg=0f172a&fg=ffffff&label=A&gradient=none"
    mobileBreakpoint="md"
    href="/"
/>

At viewports below md (768 px) the compact mark renders; at md+ the full wordmark renders. Both share the same <a href>, so the click target is identical at every viewport.

Dark-mode logo

A wordmark tuned for a light header often disappears on a dark one. Set darkLogo to supply a second image that the component swaps in automatically under the .dark class — no dark: utilities, and no duplicate <x-wirekit::brand> elements toggled by hand:

Brand as a link

<x-wirekit::brand
    logo="/placeholder/1c608019/120x32?bg=0f172a&fg=ffffff&label=ACME&gradient=none"
    darkLogo="/placeholder/1c608019/120x32?bg=f8fafc&fg=0f172a&label=ACME&gradient=none"
    href="/"
/>

The first image shows in light mode; toggle your app to dark mode and the darkLogo image takes over. darkLogo also composes with mobileLogo — the compact mobile mark stays mode-neutral below the breakpoint, and the light/dark swap applies to the desktop wordmark above it.

Accessibility

Rendered as an <a> element — the brand is always keyboard-focusable and reachable with Tab
The logo <img> is decorative: alt="" and aria-hidden="true" so the accessible name comes from the name text or the slot content
When name is omitted and logo is used alone, pass an explicit aria-label on the component to give the link an accessible name:

<x-wirekit::brand
    logo="/brand/mark.svg"
    aria-label="Acme — back to dashboard"
/>

Without an accessible name, logo-only brands are unreadable by screen readers. The component does not enforce this — adding an aria-label is your responsibility.

Keyboard Interaction

This component is purely presentational and does not respond to keyboard input.

Design Tokens

Token	Used for
`--color-wk-text`	Brand name color
`--gap-wk-sm`	Gap between logo and name
`--text-wk-lg`	Brand name font size
`--font-wk-heading-weight`	Brand name font weight