HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
AccordionA group of collapsible sections.
AnnouncementA message for the whole page, shown above its header, that can be dismissed.
App HeaderPage-level banner holding brand, navigation, and actions.
Area ChartA chart that shows how a total is made up over time, as bands stacked on one another.
AuraA drifting background of light, drawn in your theme's colors.
AvatarA person or entity, shown as an image or as their initials.
BadgeA count or a dot pinned to the corner of another element.
Bar ChartA chart that draws a table's categories as columns.
BlockquoteA passage set off from the prose around it.
BreadcrumbsShows the path to the current page.
ButtonTriggers an action, submits a form, or navigates.
Button GroupGroups related buttons into one control.
CalloutA passage set apart as a note, information, a warning, or an error.
CanvasA board of cards and the connections between them, which can be navigated, rearranged, and connected.
CardGroups related content and actions into a single surface.
CarouselShows one slide of several, with controls to move between them.
ChatA conversation's turns in a scrolling transcript that keeps the user's place.
CheckboxA box that is checked, unchecked, or indeterminate.
Checkbox GroupA group of related checkboxes under one label, with one value for the set.
CodeA fragment of code inside a line of prose.
Code BlockA block of code with an optional name and a copy button.
Color InputA field for a color, typed in any syntax or picked from a panel.
Color PickerA color picker made of a square and two ramps.
ComboboxA text field that filters a list of options as you type.
CommandA command palette: a list of commands that opens from anywhere on the page and filters as you type.
Copy ButtonA button that copies a string to the clipboard and confirms the copy.
Data TableA table drawn from an array of rows, with sorting, filtering, and paging.
Date InputA date, typed or picked from a calendar.
Date PickerA month calendar for choosing one or more dates.
Description ListA list of labels and their values, such as a details panel.
Device ScreenA device's screen, drawn from a stream you supply, that sends taps, swipes, keys, and button presses back to the device.
DialogA modal window built on the native <dialog> element.
DividerA line that separates content into groups.
Donut ChartA chart that shows parts of a whole as a ring, read from a table.
DrawerA panel that slides in from an edge.
DrilldownA stack of pages that shows one at a time, with a back button.
EmptyA message that a region has nothing in it, and the next step to take.
File InputA field for choosing files from a picker or by dropping them on it.
Filter InputA text field for filters, with the active filters shown in it as tokens.
FlexA layout that places its children in a row or a column.
Format DateA timestamp, formatted for the user's locale.
GraphA frame around a graph of notes drawn by another library, and the list that makes it readable.
GridA layout that places its children on a grid.
HeatmapA strip of cells, each colored by its reading, for uptime, contributions, or activity.
IconA named icon from the Helix set.
Icon ButtonA square button whose content is an icon.
ImageAn image that shows a placeholder while it loads and a fallback if it fails.
InputA field for a single line of text.
KbdA keyboard key or chord, set inline with text.
LegendA list of the series in a chart, each name beside the color it is drawn in.
LightboxA viewer that shows one item at a time over the page.
Line ChartA chart that draws series over time as lines, read from a table.
ListA set of rows, announced as a list.
ListboxA list of options, from which you choose one or several.
LoaderShows that work of unknown length is in progress.
LogOutput that arrives while you watch it, such as a CI run, a deployment, or a build, in a box that follows the newest line.
MapA frame around a map drawn by another library.
MegamenuA section of a navigation with a trigger that opens a panel of links.
MenuA menu of commands that opens from a trigger.
MeterA measurement in a known range, with optional bands that mark it good, fair, or poor.
Motion ToggleA button that pauses every motion on the page that starts by itself, and lets it run again.
NavigationA set of destinations, with a marker on the current one.
NotificationsA feed of notifications, each marked read or unread.
Number InputA field for a number, typed or changed with step buttons.
Object InspectorA structured value shown as a tree, where you can close branches,
see how many entries each holds, and copy any part.
OptionOne choice in a listbox.
OrbAn animated shape that shows what an agent is doing.
OutlineLinks to the headings on the page, with the section in view marked.
PaginationControls for moving between the pages of a long set of results.
Pin InputA field for a short code, with one box for each character.
PopoverA panel that opens next to its trigger and holds any content.
ProgressA bar or ring that shows how far along a task is.
QR CodeA scannable QR code for a short piece of text.
QuoteA short quotation, set inline with the text around it.
RadioOne choice in a radio group.
RatingA row of marks, such as stars, for giving or showing a score.
SandboxAn editable source pane paired with a live preview.
Scatter ChartA chart that shows whether two measures move together, with one point per row.
Scroll AreaA scrolling box that shows which edges have more content past them.
SelectA control that opens a list of options to choose from.
SkeletonA placeholder shown in place of content that is still loading.
Skip LinkA link at the start of a page that moves keyboard focus past the
header to the main content.
SliderA value chosen from a range by dragging.
SparklineA small chart with no axes that shows the shape of a series beside its number.
Spatial Bar ChartA bar chart drawn in three dimensions, each bar a block as tall as its value, for categories in one or more series.
Spatial HeatmapA heatmap drawn as a relief, where each reading stands as tall as its value.
Spatial Ribbon ChartA chart that draws each series as a ribbon in three dimensions, its top following the values, for several series over one set of places.
Spatial Scatter ChartA chart that plots each row as a point in three dimensions, for data with three measures.
Spatial Surface ChartA chart that draws a height over a grid as a surface in three dimensions, for a measure that varies over two others.
Spatial TreemapA treemap drawn in three dimensions, each item a block whose area is its size and whose height is a second measure.
Speed DialA floating button that opens a short list of the main actions on a screen.
SplitterTwo panes and a divider that you can move.
StatOne measurement, with a label that names what it measures.
StepsA sequence of stages that shows which stage the user is on.
StrandsA ribbon of fine strands of light, drawn in your theme's colors, in its own box or down a whole page.
SwitchA control that turns something on or off.
TableA table of data, laid out on a grid.
TabsA row of tabs and the panel each one shows.
TagA short label that adds metadata to content.
TerminalA frame around a terminal emulator that runs a shell you connect.
TextText, with its HTML element and its type style set separately.
TextareaA multi-line text field.
Time InputA field for a time, typed or picked from a list.
Time PickerA control for choosing a time from a list or from wheels.
TimelineA list of events, in the order they happened.
ToastThe region that holds toast messages, and the only element that announces them.
ToggleOne option in a toggle group.
ToolbarA group of controls that share one tab stop.
TooltipA short text that appears next to an element on hover and focus.
TourA guided tour of an interface, one stop at a time.
TreeA hierarchy of items, with branches that open and close.
TrendAn indicator that shows which way a measurement moved, and whether the change is good.
VideoA video player with controls drawn by Helix.
Video PlaylistA list of video clips that play one after another in a single player.
Virtual ListA list that renders only the rows of a long set that are on screen.
Loading components
HelixActiveComponentsThe DNA every Fusion interface is built from, and yours to build on.StartSandbox
All categoriesActionsChartsDataFeedbackFormsLayoutMarkersMediaNavigationOverlaysToolingTypographyAll statusesExperimentalStable115 of 115 componentsCategoryNameNewest