Components Brand logo

Brand logo

The Koala logo as an anchor link. Picks the right of the four image variants (icon-light, icon-dark, full-light, full-dark) and supports an inline app-name badge after the wordmark.

<koala-brand-logo>

Canonical

The default cascade. Below sm, just the koala head. From sm upwards, the full wordmark.

Variants

3 variants

Default

variant="Default"

Icon < sm, full sm+

Icon only

variant="IconOnly"

Full only

variant="FullOnly"

Sizes & app name

3 examples

Default (h-8)

Small (h-6)

Design

With app name

app-name="Design"

Props

5 attributes

Attribute	Values	Notes
href	URL	Required. The link target — typically the area home page.
variant	Default, IconOnly, FullOnly	Defaults to `Default` (icon mobile, full sm+).
size	Default, Small	Defaults to `Default` (h-8). Small is h-6 for compact sidebars.
app-name	string	Optional inline badge after the wordmark (e.g. “Design”).
ajax-target-main	bool	Adds `x-target.push="main"` for Alpine-AJAX shells.

Do & don't

Do Wrap the logo as an anchor to the area home page. The helper handles the four image swaps automatically.

Don't Don't drop raw <img> tags into pages. You'll miss the responsive icon-mobile / full-desktop swap.