Koala logo Design
Esc
No matches for “
↑↓ navigate open Esc close
Components Environment banner

Environment banner

Top-of-viewport banner naming the current ASPNETCORE_ENVIRONMENT — suppressed in Production. Renders --env-banner-h so other fixed elements can offset themselves below it.

<koala-environment-banner>

Canonical

DEVELOPMENT ENVIRONMENT
Page content sits below the banner. On Sticky the banner pins to the viewport top while the rest of the page scrolls.

Drop the helper into _Layout.cshtml before <main>. In Production the helper suppresses output, so the same markup ships everywhere.

Variants

2 variants
DEVELOPMENT ENVIRONMENT
In the document flow — layout sits below it without offsetting.
Sticky — default
position="Sticky"
STAGING ENVIRONMENT
Overlays the viewport — layout must reserve space via --env-banner-h.
Fixed
position="Fixed"

States

3 environments
DEVELOPMENT ENVIRONMENT
Development
STAGING ENVIRONMENT
Staging
output suppressed
Production — suppressed
The helper short-circuits to no output when ASPNETCORE_ENVIRONMENT is Production (or unset).

Props

1 attribute
Attribute Values Notes
position Sticky, Fixed Defaults to Sticky. Fixed overlays the viewport — layout must reserve space via --env-banner-h.

Label content is sourced from ASPNETCORE_ENVIRONMENT at render time and upper-cased — there's no label attribute. To suppress the banner, set the environment to Production.

Do & don't

STAGING ENVIRONMENT
Do One environment banner per layout, rendered before <main>. Warning colour, upper-case, short.
DO NOT USE IN PRODUCTION — STAGING ONLY — CLICK HERE TO LEARN MORE
Don't Don't turn the banner into a notification, link, or warning copy. It exists to label the environment — nothing more.