Composants
Cet index est généré depuis le manifeste de @okrado/ui 0.11.0 : 110 entrées, 59 stables et 51 en bêta. Chaque nom ouvre la page de docs du composant dans Storybook, où vous pouvez essayer chaque story en papier et en nuit, à 375 px et en arabe.
Un composant n’est stable que s’il a une page de docs, une matrice de stories générée au vert, axe à zéro et une note de revue. Un composant beta fonctionne mais son API peut encore changer. Voir la gouvernance.
Les agents lisent les mêmes données en JSON à /components/manifests/components.json.
Primitives
Section intitulée « Primitives »| Nom | Étape | Ce que c’est (texte du manifeste, en anglais) |
|---|---|---|
| AlertDialog | beta | A modal that interrupts for a decision the user cannot take back. |
| AlertDialogClose | beta | A control that closes its AlertDialog without acting. |
| AlertDialogContent | beta | The alert dialog panel. |
| AlertDialogTrigger | beta | The element that opens its AlertDialog. |
| Badge | stable | A status chip. |
| Button | stable | The one button. |
| ButtonLink | stable | A link that looks like a Button, for an action that navigates ("Talk to the founders" opening mail, "See how it works"). |
| Checkbox | stable | A checkbox with its label on the same row. |
| Dialog | beta | A modal dialog. |
| DialogClose | stable | A control that closes its Dialog, such as a Cancel button. |
| DialogContent | stable | The dialog panel. |
| DialogTrigger | stable | The element that opens its Dialog. |
| Display | stable | The one display headline of a marketing page. |
| Drawer | beta | A panel that slides in from the edge. |
| DrawerClose | beta | A control that closes its Drawer, such as a Cancel button. |
| DrawerContent | beta | The drawer panel. |
| DrawerTrigger | beta | The element that opens its Drawer. |
| Heading | stable | A marketing or docs heading on the fluid scale. |
| Icon | beta | A Lucide icon by name from the Okrado allow-list, in one of the three standard sizes and drawn in currentColor. |
| IconButton | beta | A square button that shows only an icon, as wide as the control height. |
| Input | stable | A single-line text input. |
| Kbd | stable | A keyboard key or shortcut, such as ⌘K. |
| Link | stable | A text link inside the current zone, in the link colour with the focus-gap ring. |
| LiveRegion | beta | A live region. |
| Menu | stable | A menu of actions or links behind a trigger. |
| MenuCheckboxItem | beta | A menu item that toggles an option on or off and keeps the menu open, such as a visible column. |
| MenuContent | stable | The floating menu panel, positioned next to its trigger. |
| MenuGroup | beta | A labelled group of related items in a Menu, such as the options of one filter. |
| MenuItem | stable | One action in a Menu. |
| MenuLinkItem | stable | A menu entry that is a link (href), for navigation menus such as the ProductSwitcher. |
| MenuRadioGroup | beta | A set of mutually exclusive MenuRadioItems, such as the density. |
| MenuRadioItem | beta | One choice in a MenuRadioGroup. |
| MenuSeparator | stable | A rule between groups of menu items. |
| MenuTrigger | stable | The control that opens its Menu. |
| Meter | stable | A scalar measurement within a known range, such as a key result's progress toward its target. |
| Mono | stable | Evidence in JetBrains Mono. |
| Popover | beta | A small panel tied to a trigger. |
| PopoverClose | beta | A control that closes its Popover, such as a Done button. |
| PopoverContent | beta | The floating panel, positioned next to its trigger with collision flip and shift, at the popover layer, with an e2 shadow and a 1 px line border. |
| PopoverTrigger | beta | The control that opens its Popover. |
| Progress | beta | Progress of a long job (ADR-0113). |
| RecordMark | stable | The Record mark (ADR-0076 §14), the only way to put the Okrado logo on a page. |
| Select | stable | A single-choice dropdown for 4 to about 15 options (fewer. |
| Skeleton | stable | A placeholder block while content loads. |
| Switch | stable | An on/off switch for a setting that applies at once (use Checkbox inside forms that submit). |
| Tab | stable | One tab. |
| Tabs | stable | Tabs that switch between panels of one view, such as the long, shorts and feed variants of a video. |
| TabsList | stable | The row of Tab buttons. |
| TabsPanel | stable | The content shown while its Tab is active. |
| Text | stable | Running text on marketing and docs surfaces in Inter, on the language's body scale. |
| Textarea | stable | A multi-line text input. |
| ToastProvider | beta | Hosts toasts for everything inside it and renders them at the bottom-end of the viewport, at the toast layer. |
| Toggletip | beta | Help that opens on press and is read aloud, for what a Tooltip cannot carry. |
| Tooltip | beta | A short hint on hover and keyboard focus, such as the shortcut of an IconButton. |
| TooltipProvider | beta | The delay group of every Tooltip below it. |
| UiProvider | stable | Gives every @okrado/ui component its locale, text direction and shared strings. |
| VisuallyHidden | stable | Text for assistive technology only, such as the name of an icon-only region. |
Composants
Section intitulée « Composants »| Nom | Étape | Ce que c’est (texte du manifeste, en anglais) |
|---|---|---|
| Banner | beta | A persistent, page-wide message at the top of the content. |
| BrandHead | beta | The brand's <head> tags for a plain React tree (React 19 hoists them into <head>). |
| Breadcrumbs | beta | The location trail of a page (ADR-0083). |
| BulkBar | beta | The bar that takes the place of the Toolbar while rows are selected (ADR-0083). |
| Card | stable | A surface that groups related content, with the card inset of the current density. |
| ConfirmDialog | beta | A destructive confirmation. |
| CtaCard | stable | The closing call to action of a page (ADR-0076 §6). |
| DataTable | beta | The list of records, the one table of the suite (ADR-0083, ADR-0078). |
| DecisionPanel | beta | The governance moment (ADR-0076 §4, §10). |
| EmptyState | stable | The state of a list or a module with nothing to show, or whose data could not be loaded. |
| Field | stable | A form field. |
| FilterBar | beta | The search, filters and result count of a list, for the Toolbar (ADR-0083). |
| Form | beta | A form with explicit save (ADR-0112). |
| FormActions | beta | The one Save button of a Form, kept enabled (a disabled save hides why it cannot save) with a Cancel to its right. |
| FormField | beta | One field of a Form. |
| InlineNotice | beta | A message tied to a place. |
| KeyResultProgress | stable | A key result with its progress (ADR-0030). |
| KpiTile | stable | A KPI on a dashboard or the app's Home (ADR-0076 §11). |
| KrRow | stable | One key result as a table row (ADR-0076 §10, §11). |
| LedgerChain | stable | A chain of ledger records (ADR-0076 §6). |
| LedgerRow | stable | One ledger record (ADR-0076 §10). |
| LoopDiagram | stable | The Loop (ADR-0076 §6). |
| PageContent | beta | The content column of a page inside the shell. |
| PageHeader | beta | The top of every page (ADR-0083). |
| Pagination | beta | The footer of a list. |
| PreferencesForm | stable | The user's display preferences (ADR-0060, ADR-0065). |
| ProductFrame | stable | A product shot on a marketing or docs page (ADR-0076 §8). |
| Prose | stable | Long-form Markdown, such as a decision record's body, in the design system's type scale. |
| RecordHeader | stable | The head of a record view (ADR-0069). |
| RecordList | stable | The list half of the viewer pattern (ADR-0069). |
| RecordListHead | stable | The header row of a {@link RecordList}. |
| RecordStatus | stable | The status of a decision, note, key result or video as a labelled badge, with one tone per status across the suite. |
| Section | stable | A titled region of a page (ADR-0069 page frame). |
| SectionHead | stable | The head of a marketing or docs section (ADR-0076 §2). |
| ShortcutsDialog | beta | The ? dialog. |
| SiteFooter | stable | The footer of an Okrado site (ADR-0076 §2, R §3). |
| SiteHeader | stable | The header of an Okrado site (ADR-0076 §2). |
| Steps | stable | Steps on a chained rule (ADR-0076 §6). |
| Toolbar | beta | The row of controls above a DataTable (ADR-0083). |
| VerifyBlock | stable | The proof under a ledger (ADR-0076 §6). |
| VideoCard | stable | A Studio video in a grid (ADR-0069 library). |
| ViewOptions | beta | The "View" menu of a list (ADR-0083). |
| Nom | Étape | Ce que c’est (texte du manifeste, en anglais) |
|---|---|---|
| AppShell | beta | The suite's frame, the same in every zone (ADR-0058, ADR-0069, ADR-0083). |
| BottomBar | stable | The phone navigation of the shell (ADR-0069). |
| CommandPalette | stable | The suite's command palette (Cmd/Ctrl+K). |
| Inspector | beta | The right panel of a split page (ADR-0083, L4). |
| NavGroup | beta | A labelled group of sidebar items (ADR-0083). |
| ProductNav | beta | The sidebar list of the active product's modules, with registry labels in the user's locale. |
| ProductSwitcher | beta | The sidebar's product switcher. |
| SearchTrigger | beta | The top bar's search field (ADR-0083). |
| SuiteLink | stable | A link to any page of the suite, across zones. |
| TopBar | beta | The content of the shell's 48 px top bar (ADR-0083), passed as AppShell's topBar. |
| ZoneShell | beta | The whole zone frame in one piece (ADR-0058, ADR-0083), which the web-zone template mounts once. |
- Responsable
- Okrado founders
- Mis à jour le
- À revoir avant le
- Version Markdown
- /fr/catalog.md