Environment Indicator

<sa-environment-stripe label="Testing" color="EnvironmentStripeColor.Warning"/>

UsageCopy Anchor Link

Add one of the three indicators to your layout: <sa-environment-stripe>, a thin bar across the top of the window with the name of the environment on a tab, as above; <sa-environment-frame>; or <sa-environment-banner>. Each is fixed to the window, so it can go anywhere in the page. Render it only in the environments that should show one, however your application determines its environment.

@if (environmentName is not null)
{
    <sa-environment-stripe label="@environmentName" color="EnvironmentStripeColor.Warning" />
}

The text on the indicator is white or dark, whichever reads better on its colour.

ExamplesCopy Anchor Link

FrameCopy Anchor Link

A border around the whole window, with the name of the environment on a tab at the top.

<sa-environment-frame label="Local" color="EnvironmentFrameColor.Info"/>

BannerCopy Anchor Link

A bar across the top of the window, with room for a description after the name. The page and the sidebar move down by the banner's height, so nothing is hidden under it.

<sa-environment-banner label="Live" color="EnvironmentBannerColor.Danger" description="Changes affect live customers"/>

Custom colourCopy Anchor Link

Set custom-color to any CSS colour to use it in place of the theme colours, and custom-dark-color to use another colour in dark mode.

<sa-environment-banner label="Staging" custom-color="#7c3aed" custom-dark-color="#c4b5fd" description="Data is reset every night"/>

Tab sizeCopy Anchor Link

Set tab-size on a stripe or frame to make the tab that names the environment smaller or larger.

<sa-environment-stripe label="Testing" color="EnvironmentStripeColor.Warning" tab-size="EnvironmentStripeTabSize.ExtraLarge"/>

API ReferenceCopy Anchor Link

<sa-environment-stripe>Copy Anchor Link

Renders a <div> element fixed to the top of the window, forwarding any global attributes.

<sa-environment-frame>Copy Anchor Link

Renders a <div> element that borders the window, forwarding any global attributes.

<sa-environment-banner>Copy Anchor Link

Renders a <div> element fixed to the top of the window, forwarding any global attributes.