Our components enable designers to build complete core Workforce experiences. Their systematic use makes our products easier to use and creates consistency across all WIC products.
Components are designed and built to be:
- Stable. Components may add functionality or variants but they won’t be changed in ways that break how designers and engineers use them.
- Themeable. Components are customizable using the token system, allowing flexibility for both internal teams and external customers.
- Accessible. Components meet color contrast and typographic guidelines, and are built to work well with screen readers and keyboard navigation.
- Responsive. Components are designed and built with consideration for various container sizes and content sizes.
- Internationalized. Components are adaptable to allow translations and localization that they need to support.
Additional components will be added in future releases. See the Roadmap.
If you don't see the component you need here, submit your request or draft component to Odyssey Labs.
A vertically stacked set of headings that expand to show content and collapse to hide it.
An input field that enables selections or filters a list of options as the user types.
An indicator that reports system-generated counts or items that require user attention.
A system-generated alert related to the overall experience of the product.
A navigation aid that shows users their location in the hierarchical structure of the product.
A clickable element that triggers an action.
A notification that displays feedback in response to a user action or system activity.
Checkbox and checkbox group
An input that allows users to select and unselect multiple options from a list.
An animation that indicates an ongoing process.
A code-only component that inserts global styles into applications.
An input that allows users to select a past, present, or future date or time.
A modal that interrupts a workflow and requires an action before continuing.
A component that groups related fields together in a logical set to create a hierarchy, often in a form.
A component that arranges inputs to layout and build forms.
A code-only component that applies Odyssey iconography styles to visuals.
A type of navigation that takes users to a different location — usually another page or website.
A clickable element that triggers a list of actions for users to select from.
An input that allows users to make a single selection from a list of mutually exclusive options.
A code-only component that enhances accessibility by providing text for screen readers.
An input that allows users to select a single option or multiple options from a menu of items.
An indicator that provides the status of an item.
A container that organizes and displays information so users can scan, compare, and take action.
A type of navigation that allows users to move between related content at the same level of hierarchy.
A type of navigation that categorizes and organizes metadata for users.
An input that allows users to enter, select, and search text and data.
A temporary alert that is displayed based on a user action.
A feedback indicator that displays contextual help or information when a user hovers or interacts.
A code-only component that provides pre-defined, on-brand text styles.
Oktanauts can use the following resources when building with Odyssey components:
- Check the Odyssey 1.0 FAQs.
- Join #odyssey in Slack to ask questions and stay up to date about the design system.
- Attend Odyssey Office Hours on Mondays and Wednesdays from 1-1:30 p.m. PT / 4-4:30 p.m. ET.
- Submit bug reports and feature requests to the Odyssey Jira board.