Environment notice

A thin band above the app bar that says this deployment is a development version — its data can be reset and it is not a commercial offer — driven by the deployment's stage: it renders nothing in production.

Web · ✓Mobile · ✓Desktop · ✓BetaBlocks

import { EnvironmentNotice, environmentNotice } from "@krizaka/ui/environment-notice";

Development version Data can be reset at any time. Not a commercial offer.

What this means

The app bar and the page follow.

Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.

Why it is here. Yomizaka (krizaka/yomizaka#364) on every surface of its dev deployment, then Akinaza and Orazaka.

When to use

On every screen of a development, staging or preview deployment that people can reach (dev.<product>.com, the admin console, the phone app, the Mac app).
Whenever the app must tell a visitor that what they see is not the real offer, with the stage read once from configuration.

When not to use

The announcement of a chapter on a told page (« Step 02 · Payments »).Use instead: Stage banner
A message about the visitor's own situation (a quota, a failure, a maintenance window).Use instead: Alert
A transient confirmation.Use instead: Toast

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { EnvironmentNotice, environmentNotice } from "@krizaka/ui/environment-notice";

Examples

A development version

The band above the app bar, with its line and a link; the stage development shows it, production renders nothing.

Development version Data can be reset at any time. Not a commercial offer.

What this means

The app bar and the page follow.

Another stage

Any stage but production shows the notice; the words are the app's.

Staging version Data can be reset at any time. Not a commercial offer.

Props

Prop	Type	Default	Description
`message`required	`string`	—	The line (« Data can be reset at any time. Not a commercial offer. »). Passed translated.
`stage`required	`string \| null \| undefined`	—	The deployment's stage, read once by the app. `production` (or `prod`) renders nothing; any other value shows the notice.
`title`required	`string`	—	The headline (« Development version »): also the region's accessible name. Passed translated.
`link`	`{ label: string; href: string; }`	—	An optional way to learn more. `linkAs` renders it with your router's Link.
`linkAs`	`ElementType<any, keyof IntrinsicElements>`	—	Renders the link with your router's Link (`next/link`) instead of an `<a>`.

Accessibility

A region named by its title (role=region, aria-label), not a live region: it is there from the first render, not an event.
Its colours are the warning tint over the surface and the text roles (readable in dark and light); there is no motion.
It cannot be dismissed: the line is part of the page for as long as the stage is not production.

Keyboard

Keys	Action
`Tab / Enter`	Reaches the link, when there is one.

Best practices

Read the stage once (an env var named by context, such as APP_ENVIRONMENT, or a setting in the database) and pass it down from the root layout: never an if per page.
Pass the words from your messages (@krizaka/i18n), French first where the app defaults to French; the package ships none.
Put it above the app bar, outside the content, so it never covers anything and shifts nothing (it is server-rendered with a minimum height).
environmentNotice(config) is the rule if you need it elsewhere (a native shell, a test): it returns null for production and prod.
Set the stage in the deployment spec of the dev environment; no production spec sets it to development.

Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub