Brand

The brand mark: the Firmly Logo optionally linked to logoHref, followed by a slash-separated app name optionally linked to appHref, and a single status chip combining beta and non-production env. Use at the top of AppShell's sidebar and anywhere else the hub's brand identity needs to appear alongside a child app's name.

Wordmark and app name

The platform's wordmark, a slash, then the app sitting on it — so every app's header says where it belongs without each one drawing its own lockup. Omit app for the wordmark alone.

ground

Environment and pre-release chips

env folds the environment into a status chip and hides itself in production, so a screenshot from prod never carries a badge and a screenshot from UAT always does. beta marks an app as pre-release. The chip sits on the page background, so it takes bg-card rather than bg-secondary — the latter is nearly invisible there in light mode.

Admin uat Reports Beta Checkout

Sizes

size scales the app name and sets Logo's default with it; logoSize overrides just the wordmark, for a marketing header where the brand should stand out without the app name growing to match.

ground firmly. ground firmly. ground

API

Prop Type Default Description
app string

Child app name rendered after the slash. Omit to show only the logo.

wordmark string

Forwarded to Logo. A product with a wordmark of its own sets this and omits app, so the lockup is the product's name alone.

logoHref string

Href for the logo link. Omit to render the logo as plain text.

appHref string

Href for the app name link. Omit to render the app name as plain text.

env string

Environment name folded into the status chip. Hidden when prod, so production shows nothing.

beta boolean false

Folds Beta into the status chip, marking the app as pre-release.

size 'sm'|'md'|'lg'|'xl' 'sm'

Size used to scale the app name; also Logo's default unless logoSize is set.

logoSize 'sm'|'md'|'lg'|'xl'

Overrides Logo's size independently of size, e.g. to make the wordmark stand out without enlarging the app name.

class string ''

Additional Tailwind classes merged onto the root <span>.