Skip to contentComponents
Core
- Button: A native button or link with its own visual style, size, and loading and disabled states.
- Icon: One glyph from Oblyx's semantic icon set, rendered as inline SVG with no network request.
- Card: A bordered container for a self-contained chunk of content, with optional header, body, and footer.
Forms
- Input: A labeled text input that uses native HTML form submission and constraint validation, no wrapper element.
- Textarea: A labeled multi-line text control, the textarea counterpart to input.
- Checkbox: A labeled checkbox for a single boolean value, painted by a visual sibling next to the real input.
- Radio: A single labeled radio button; grouping is the native name attribute, with no group wrapper element.
- Switch: A checkbox that reads as a toggle: same boolean value, a pill-and-thumb visual instead of a box.
- Select: A labeled dropdown composed from option children, backed by a real hidden native select.
Layout
- Stack: A one-dimensional flex layout: a row or column of children with a token-based gap between them.
- Grid: A two-dimensional CSS grid layout, for children that need to span more than one track.
- Divider: A horizontal or vertical rule, with an optional centered label, and no margin of its own.
- Layout: A two-dimensional application shell: header, footer, and a content region with optional side panels.
Overlays
- Dialog: A centered modal built on the native dialog element and showModal(), for a title, body, and action row.
- Drawer: An edge-anchored panel on the same native dialog foundation as Dialog, sliding in from a viewport edge.
- Popover: A click-triggered surface anchored to a trigger button, for content that needs real interaction.
- Tooltip: A short hint anchored to its trigger content, shown on hover or keyboard focus, advisory only.
- Menu: A trigger button that opens a popup list of actions.
Navigation
- Link: A plain, styled anchor with no router indirection or client-side interaction logic.
- Tabs: A tab strip, its tabs, and the panels they control, with full ARIA wiring for server-rendered content.
- Breadcrumbs: A trail of items in a nav landmark, each a real link except for the current page.
- Pagination: Previous, indicator, and next controls as real links, built from an href pattern with no routing scheme.
- Side nav: A nav landmark that lays out headings, sections, and items, including nested items, in document order.