Sentinel mini
The Sentinel, Orazaka's guardian, at 24 px: a core, a ring and an orbit in the accent — for a sidebar, a header, a loading corner.
Web — React, from @krizaka/orazaka-design-system. The Orazaka mobile app takes the kit's tokens, not its components. Stable: its API only changes in a major version.
Why it exists above Krizaka UI
The Orazaka mark (OrazakaLogo, @krizaka/ui) signs the product; the Sentinel stands for what watches over the requests — the interceptors. It is drawn once here, in the accent role, so it follows the brand and every named theme.
When to use
- Next to a section that the governance watches (the console's pipeline, the audit trail).
- As a small brand accent in a dense sidebar where the mark would be too much.
When not to use
- As the product's logo: use
OrazakaLogofrom @krizaka/ui. - As a loading indicator.Use instead: Spinner
Installation
Install
npm install @krizaka/orazaka-design-system && npm install -D tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/orazaka-design-system/theme.css";The package ships its TypeScript sources: add it to transpilePackages (with @krizaka/orazaka-shared and @krizaka/ui).
Import
import { SentinelMini } from "@krizaka/orazaka-design-system";Examples
In a sidebar heading
Beside the name of the section the governance watches.
Props
Compact 24×24 Sentinel mascot with simplified core + single orbital ring.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes. |
size | number | 24 | SVG size in pixels. Defaults to 24. |
Accessibility
aria-hidden: decorative.- Strokes and fills read
--kz-accent: it follows the theme.
Best practices
- Decorative: put it next to a text that says what it means.
- Keep it small (16–32 px): its strokes are drawn for that size.
Related components
Generated from the code of @krizaka/orazaka-design-system 2.5.0: its meta.ts, its examples and its types.Edit this documentation on GitHub