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.
Accordion
A vertically stacked set of headings that expand to show content and collapse to hide it.
Autocomplete
An input field that enables selections or filters a list of options as the user types.
Badge
An indicator that reports system-generated numerical information related to an element.
Banner
A system-generated alert related to the overall experience of the product.
Breadcrumbs
A navigation aid that shows users their location in the hierarchical structure of the product.
Button
A clickable element that triggers an action.
Callout
A notification that displays feedback in response to a user action or system activity.
Card
A customizable surface that serves as an entry point for one app, experience, or topic.
Checkbox and checkbox group
An input that allows users to select and unselect multiple options from a list.
Circular progress
An animation that indicates an ongoing process.
CSSBaseline
A code-only component that inserts global styles into apps.
Data table
A container that organizes and displays information so users can scan, compare, and take action.
Date picker
An input that allows users to select a past, present, or future date or time.
Dialog
A modal that interrupts a workflow and requires an action before continuing.
Drawer
A modal that is triggered by user action and provides contextual information.
Fieldset
A component that groups related fields together in a logical set to create a hierarchy, often in a form.
File Uploader
A tool that allows users to select and upload files to a location.
Form
A component that arranges inputs to layout and build forms.
Icon
A code-only component that applies Odyssey iconography styles to visuals.
Link
A type of navigation that takes users to a different location — usually another page or website.
Menu button
A clickable element that triggers a list of actions for users to select from.
Radio group
An input that allows users to make a single selection from a list of mutually exclusive options.
ScreenReaderText
A code-only component that enhances accessibility by providing text for screen readers.
Select
An input that allows users to select a single option or multiple options from a menu of items.
Status
An indicator that provides the status of an item.
Switch
An input that allows users to activate or deactivate a setting.
Tabs
A type of navigation that allows users to move between related content at the same level of hierarchy.
Tag
A type of navigation that categorizes and organizes metadata for users.
Text field
An input that allows users to enter, select, and search text and data.
Toast
A temporary alert that is displayed based on a user action.
Tooltip
A feedback indicator that displays contextual help or information when a user hovers or interacts.
Typography
A code-only component that provides pre-defined, on-brand text styles.
Have questions or need support?
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
- Request a new component using the Odyssey component proposal.