Display
Badge
Badges bring the user's attention to something.
Data Table
Display structured data in rows and columns for comparison and review.
Disclosure
Show and hide non-critical, contextual content in place
Empty State
Let users know when there is nothing to show.
Icon
Icons provide additional context to elements on the page.
Notification
Notifications notify the user with the status of an action.
Progress Bar
Shows how far through a process or task something is.
Progress Stepper
Shows a user's progress through a multi-step form, and what's coming next.
Summary List
Display labelled data for users to review.
Timeline
Show a series of events or steps in chronological order.
Tooltip
Show supplementary context for an interactive element on hover or focus.
Inputs and actions
Checkbox
Let users select one or more options from a group, or toggle a single option on or off.
Chip
Represent a selected or applied value that can be removed.
Combobox Field
A searchable multi-select field for choosing one or more options from a long list.
CTA Button
Trigger actions on the current page.
CTA Link
Navigate users to another page or URL with a prominent, action-oriented link.
Currency Field
A form field for entering monetary amounts, with a currency symbol prefix
Date Field
A three-part form field for entering a day, month, and year separately
Datepicker Field
A form field for entering a date, with an optional calendar popup for selection
Form
Form wraps a set of inputs and actions, provides error context to fields, and manages error display and focus.
Monthpicker Field
Lets users input a month and year using a calendar popup or free text.
Radio
Let users select exactly one option from a group of mutually exclusive choices.
Select Field
A form field for choosing a single option from a predefined list
Text Field
A form field for accepting text inputs
Textarea Field
A form field for collecting multi-line free-form text
Other
Layout components
Primitive components for composing consistent spacing and layout structures without writing custom CSS.
Skeleton Loading
Skeleton loaders show the shape of content while it loads, reducing perceived wait time and preventing layout shift.
Subcomponents
Subcomponents are low-level primitives for building custom form fields and inputs with consistent Nebula styling.
Visually Hidden
VisuallyHidden renders content that is visible to screen readers but hidden from sighted users.
Surface
Accordion
Accordions let users show and hide sections of related content on a page.
Card
Cards group related content or controls into a distinct, bounded section.
Modal
A modal interrupts the user with a focused overlay that requires them to act or dismiss before continuing.
Page
Page provides a consistent layout shell for application pages, including navigation aids, a title, page-level actions, and a content area.
Tabs
Tabs organise related content into parallel sections that users can switch between without leaving the page.
Typography
Heading
Semantic heading elements for structuring page and section content
List
Styled list elements for ordered, unordered, and definition lists
Text
Styled inline and block text elements for body content
Text Link
An anchor link for navigating to pages or anchor points within prose