Flowbite, extracted and documented

A clickable control that triggers an action; provide the label text and, optionally, an icon.

Use violet-600 (Primary) for the single main action in a view. Use the gray Secondary style for lower-emphasis actions beside it, never two Primary buttons in the same view. Reserve green-700 (Success), red-600 (Danger) and amber-500 (Warning) for actions that match that meaning, not for visual variety. Warning pairs with gray-900 text, not white, white fails contrast on amber-500 (2.15:1). Radius is radius-md; horizontal padding scales space-3 → space-6 across the five sizes (xs → xl), matching Flowbite's own button padding at each size.

Never rely on color alone to mark a destructive action, label it ("Delete", "Remove"), don't just make it red. Disabled buttons drop to 50% opacity and lose the pointer cursor; they still need a reason visible nearby (helper text, tooltip), not just the dimmed look.

A binary on/off control for one option in a list, or for a single agreement toggle; provide the label text.

Uses the browser's native checkbox with accent-color: violet-600 rather than a hand-drawn replica, real keyboard and screen-reader behavior for free, tinted to the brand. Label text is gray-700; disabled drops to gray-400 and removes the pointer cursor.

Always pair the box with a clickable label (<label> wrapping both, or for/id), never a checkbox with no associated text.

The trigger control for choosing a date range; provide the currently selected start and end dates.

Scope note: this is the closed-state trigger only, styled like an Outline button showing the formatted range and a calendar glyph (drawn in CSS, no icon asset available to copy), not the open calendar grid itself. The grid is a materially different, more complex component (month navigation, day selection, range highlighting) and hasn't been built yet; treat it as a separate future component rather than assuming this covers it.

Border gray-300, radius radius-sm, focus ring violet-500, same as Select.

A single-line text field with a label and helper text; provide the label, placeholder, and, for the error/success states, a message explaining why.

Default border is gray-300, radius radius-sm. That border alone is a light 1.47:1 against a white page and doesn't meet the 3:1 non-text contrast guideline on its own; the label above the field and, on focus, the violet-500 ring (4.40:1) are what actually mark the boundary, this is flagged rather than silently fixed, since it's this system's own choice, not a copied brand value.

Error state tints the whole field red-100 background / red-600 border / red-800 text; success tints green-100 / green-600 / green-800. Never show the error tint without an explanatory message next to it, the color change alone doesn't say what's wrong. Disabled fields use gray-100 background and gray-400 text and drop the pointer cursor.

A single choice among mutually exclusive options; provide the option group name and the list of labels.

Same approach as Checkbox: native <input type="radio"> with accent-color: violet-600, real interaction included. Group options under one name attribute so only one can be selected.

Never use Radio for a single yes/no toggle, that's Checkbox's job.

A text input scoped to filtering a list of results as you type; provide a placeholder describing what's being searched.

Built on Input's tokens (gray-300 border, radius-sm, violet-500 focus ring) with a trailing icon button in radius-sm on its right edge, background violet-600 / icon white. The icon is drawn in CSS (no icon font or image asset available to copy from a real source, so nothing was approximated as a logo or brand mark, just a generic magnifier shape).

Use this only where results filter live or on submit; if there's no list to search, it's a plain Input.

A single-choice dropdown for filtering or picking a value from a fixed list; provide the option list and the current value.

Shares Input's border and radius (gray-300, radius-sm) and the same contrast caveat: that border alone doesn't meet 3:1 against white, the label and focus ring (violet-500) carry the boundary. Trailing chevron in gray-400. Disabled uses gray-100 background and gray-400 text.

Prefer Radio over Select when there are 4 or fewer options, letting people compare choices without opening a menu is usually better than hiding them.

A collapsible section for hiding secondary content (typically filter groups) behind a heading; provide the heading text and the content it hides, and optionally a trailing action like "Reset".

Built on native <details>/<summary>, expand/collapse and keyboard support come from the browser, no JavaScript. The chevron rotates 180° on open using a details[open] CSS selector, not a script. Header text is body-sm font-medium in gray-700; the panel has no border or background of its own, it just indents.

Don't nest an Accordion inside another Accordion, flatten the groups instead, or it becomes hard to scan.

The top utility bar for filters that apply across the whole app (region, health system, facility type), plus the current user's menu; provide the filter labels and values, and the user's name.

Background is transparent, meant to sit directly on the app shell's violet-50 background, not on white, that's what separates it visually from the page-level Header sitting below it. Each filter is a label/value pair, caption label in gray-500, value in gray-900, gray-400 chevron. The user menu reuses an avatar circle in violet-100/violet-700.

Distinct from FilterTrigger: FilterTrigger is the single pill control, this is the app-wide bar that groups several of them with the account menu.

The page-level header: breadcrumb, title, primary actions and a row of page filters; provide the breadcrumb trail, the title, the action labels and the filter labels.

White background (#fff), distinct from the app shell's general violet-50 background so it reads as a raised block. Border-bottom gray-200; breadcrumb links gray-500, current page gray-700; title in h1, gray-900. Primary action pairs with the Secondary style beside it, same rule as the Button component: one Primary per view. Filter pills reuse the same visual language as FilterTrigger but sit inline, for page-scoped filters rather than app-scoped ones (see AppLevelFilter for the latter).

The left column: logo, app switcher, two top-level links, then the main navigation with one active item and one expandable item for sub-pages; provide the app name, the nav labels, and which item is active.

White background, border-right gray-200, unaffected by the app shell's violet-50 background. Active item gets a violet-600 left border, violet-50 background and violet-600 text; inactive items are gray-600. Combines Sidebar's navigation pattern with MenuButton's icon-trigger variant for the app switcher, assembled as one organism rather than composed by hand each time.

Same active/inactive rule as Sidebar: this is a functional current-page indicator, not decoration.

A button that opens a small list of actions or options; provide the trigger label and the list of menu items.

Built on the native <details>/<summary> disclosure element, not custom JavaScript, real click-to-toggle and keyboard support come from the browser for free. The trigger is styled as a Secondary button with a trailing chevron; the panel is shadow-sm, radius-lg, gray-200 border, offset space-2 below the trigger.

Never put more than roughly seven items in one menu without grouping them, past that, it's a page, not a menu.

The top-level app bar; provide the app name (and a logo image, if one exists) plus the primary nav links and the current user's name.

Built with this system's neutral tokens only, white background, gray-200 bottom border, gray-800 text, not any specific product's brand color. No real logo was supplied to this system, so the logo slot is a plain gray-200 placeholder square with radius-md, not a reconstructed mark; swap it for the real asset when one is provided, per this system's rule against approximating logos. The user menu on the right reuses MenuButton.

Height is space-16 (64px); horizontal padding space-6.

A vertical list of destinations (reports, pages, sections); provide the list of labels and which one is active.

The active item gets a violet-600 left border, violet-50 background and violet-700 text; inactive items are gray-600 text with a gray-50 hover background. This is a functional current-page indicator, not decoration, don't add the same left-border treatment to something that isn't indicating "you are here."

This is the generic Flowbite-token version of the container; it does not carry any specific product's brand color (see Navbar).

A contained surface for grouping related content; provide a heading, body text, and optional actions or a list of rows.

Border gray-200, radius radius-lg, shadow shadow-xs, padding space-6, matching Flowbite's default card (p-6). The border is decorative structure, not a state indicator, so it isn't held to the stricter 3:1 UI-boundary guideline the way a form input's border is.

Keep shadow-xs as the only elevation cue; don't stack a heavier shadow and a darker border on the same card. A card with a list divides rows with gray-200, not a border around each row.

A small label attached to a piece of content; provide the text (and, for the category variant, which of the seven hues it belongs to).

Three variants, one component: - Outline, transparent fill, <color>-600 border, <color>-800 text. For a score or sentiment value that needs to stand out without shouting. - Solid, <color>-600 (or amber-500, red-600) background. Danger and Success solid badges use white text (they pass 4.5:1); Warning solid uses gray-900 text (white fails on amber-500). For a status that needs weight, like an alert state. - Category chip, a small colored dot plus gray-700 label text, no border or fill. Cycle the seven hues (gray, blue, green, red, amber, purple, teal) across categories in a stable, documented order, never assign colors ad hoc per instance, or the same category will drift to different colors elsewhere.

Never use color alone on the Solid variant without the text also saying what the status is, "RE-OPENED", not just a red pill.

Inline text that navigates or triggers an action from within a sentence or a list; provide the label text.

violet-600 default (5.88:1 on white), violet-700 on hover with an underline added on hover only, the underline appearing is itself a hover signal, so it doesn't need to be there by default when the color already marks it as a link within a body-text paragraph. A standalone link used as a control (not inside a sentence) still needs that color to meet 4.5:1, which violet-600 does.

Never use Link styling on something that isn't navigable, that's what Button (ghost/text style) is for.

An inline strip of "LABEL: value" pairs describing a record (a person, a submission, an entry); provide the ordered list of label/value pairs.

Labels are caption (12px, uppercase, gray-500); values are body-sm (14px, gray-700). Pairs wrap onto new lines as a group, never mid-pair, separated by space-4 gaps.

Keep it to short scalar facts (dates, IDs, single words); anything longer belongs in the body content below it, not squeezed into a meta row.

A single number with a label, for a dashboard summary; provide the number and the caption describing it, and optionally a link to the detail view.

Value uses the h2 type style (36px/700) in gray-900; caption is caption (12px) in gray-500, uppercase, above the number. An optional link below uses Link's violet-600.

Never show a number here without a caption, an unlabeled number is meaningless out of context. Keep to one number per tile; a tile with a trend arrow or delta is a variant to design deliberately, not to bolt on.