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, depuis @krizaka/orazaka-design-system. L'app mobile Orazaka prend les tokens du kit, pas ses composants. Stable : son API ne change qu’à une version majeure.
Pourquoi il existe au-dessus de 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.
Quand l’utiliser
- 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.
Quand ne pas l’utiliser
- As the product's logo: use
OrazakaLogofrom @krizaka/ui. - As a loading indicator.À la place : Spinner
Installation
Installer
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).
Importer
import { SentinelMini } from "@krizaka/orazaka-design-system";Exemples
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 | Défaut | Description |
|---|---|---|---|
className | string | — | Additional CSS classes. |
size | number | 24 | SVG size in pixels. Defaults to 24. |
Accessibilité
aria-hidden: decorative.- Strokes and fills read
--kz-accent: it follows the theme.
Bonnes pratiques
- 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.
Composants liés
Généré depuis le code de @krizaka/orazaka-design-system 2.5.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub