EnvironmentBand
A full-width, non-dismissible band that shows which environment the user is in.
beta
Try it
Environment: Staging
<EnvironmentBand name="Staging" />Examples
Staging
Environment: Staging
<script lang="ts">
import EnvironmentBand from '@tcpsystems/ui/foundation/EnvironmentBand';
</script>
<EnvironmentBand name="Staging" />Environment tones
Environment: Development
Environment: Staging
Environment: Production
<script lang="ts">
import EnvironmentBand from '@tcpsystems/ui/foundation/EnvironmentBand';
import Stack from '@tcpsystems/ui/foundation/Stack';
</script>
<Stack>
<EnvironmentBand name="Development" tone="neutral" />
<EnvironmentBand name="Staging" tone="warn" />
<EnvironmentBand name="Production" tone="danger" />
</Stack>API
import EnvironmentBand from '@tcpsystems/ui/foundation/EnvironmentBand';| Prop | Type | Default |
|---|---|---|
name | string | none |
tone? | 'neutral' | 'warn' | 'danger' | 'warn' |
| Hook | Kind |
|---|---|
.tcp-env-band | Root class |
data-tone | Data attribute |