Helsinki Design System
Helsinki Design System
Getting started
Tutorials
Guidelines
Visual assets
Design tokens
Components
OverviewLibrariesComponent statusAccordionButtonCardCheckboxDate inputDialogDropdownFieldsetFooterIconKorosLoading spinnerLogoNavigationNotificationNumber inputPassword inputPhone inputRadio buttonSearch inputSelection groupStatus labelTabsTagText fieldsTime inputToggle buttonTooltip
Patterns
About
Contributing
Resources

Component overview

This section lists all components currently available in HDS. Tokens and components are available in two separate npm packages, HDS Core and HDS React. Refer to the component table below to check which components are supported in each package.

Libraries

Core styles

The core package provides Helsinki City brand colours, typography, and base styles as CSS styles and variables. It also contains a collection of styles for components and icons that can be used in non-React applications.

The core components and technical documentation are available in Helsinki Design System Core Storybook.

View hds-core in GitHub

React components

Helsinki Design System React library provides a collection of React components for building websites and applications. Using these components will help developers to rapidly create user interfaces that are in line with the Helsinki City Design Language. Components also promote accessible and consistent behavior across applications.

The React components and technical documentation are available in Helsinki Design System React Storybook.

View hds-react in GitHub

Component status

HDS uses a simple labeling system for components to communicate their completeness and susceptibility to changes:

StatusDescription
DraftComponent is open for feedback. It was released/changed recently. We are monitoring if it needs fixes. Be cautious of using in production because breaking changes are still possible.
StableComponent's implementation, design and documentation are stable. These components can be used in production. If breaking changes cannot be avoided, the major version number will be increased. The aim is to communicate these changes as early as possible. Enhancements are also possible without breaking changes.
AccessibleComponent has been tested for accessibility by a 3rd party auditor.
NewComponent has been released in or after the latest major release.
UpdatedA breaking change has been introduced to this component in the latest major release.
DeprecatedComponent will be removed in the upcoming major releases. Avoid using in production.

For future components, see Roadmap.

ComponentStatusCoreReact
AccordionStable
ButtonStable
CardStable
CheckboxStable
ComboboxStable
Date inputDraft
DialogDraft
FieldsetDraft
FooterDraft
IconStable
Loading spinnerStable
LogoStable
NavigationDraft
NotificationStable
Number inputDraft
Koros (wave elements)Stable
Password inputDraft
Phone inputDraft
Radio buttonStable
Search inputDraft
SelectStable
Search inputDraft
Selection groupStable
Status labelStable
TabsStable
TagStable
Text inputStable
Text areaStable
Time inputDraft
Toggle buttonDraft
TooltipStable
ImageWithCardStable
SectionStable