Keep people oriented.

Fifteen building blocks for clear feedback, useful navigation, and content that opens when it is needed. Explore the local workspace example below.

Workspace example

Keyboard guidance

Tabs have one Tab stop in their list. Arrow keys move between enabled tabs; Home and End move to the first and last. Automatic tabs activate on focus; manual tabs wait for Enter or Space. Vertical tabs use Up and Down, and horizontal tabs follow the text direction.

Accordion headings and disclosure triggers are native buttons. Enter and Space open their content. Accordion also supports Up, Down, Home, and End between enabled headings. Toggle Group arrows move focus; Enter and Space toggle the focused button. Each group needs an accessible name.

Feedback without interruption

Alert content is static by default. Choose role="status" for non-urgent updates or role="alert" for a newly inserted urgent error. A Spinner is decorative unless it has a label. Give every Progress a label; leave its value undefined when completion cannot be measured.

Navigation stays native

Breadcrumb and Pagination preserve real links, current-page state, and standard browser behavior. Use PaginationButton for state held in the application. Choosing page ranges, fetching records, and announcing results remain application responsibilities.

Built on native semantics

The interactions follow W3C Authoring Practices. Typography styles semantic HTML without choosing your document outline. Aspect Ratio controls media geometry; it does not supply alternative text.