Helsinki Design System
Helsinki Design System
Getting started
Guidelines
Visual assets
Design tokens
Components
OverviewLibrariesComponent statusButtonCardCheckboxDropdownFooterIconKorosLoading spinnerLogoNavigationNotificationRadio buttonSelection groupStatus labelTagText fieldsTooltip
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 component for building websites and applications. Using the components will help developers to rapidly create user interfaces that are in line with the Helsinki City Design Language as well as accessible and consistent in behavior across applications.

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

View hds-react in GitHub

Component status

Since HDS is still in beta stage, the component libraries are still experimental. The existing components can be used in projects but changes may still occur even for stable components.

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

StatusDescription
Pre-releaseComponent has been released/changed recently and 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 and fully featured. These components can be used in production. In the alpha stage we reserve a possibility to do breaking changes to stable components but this is unlikely!
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
ButtonStable
CardPre-release
CheckboxStable
ComboboxStable
DropdownDeprecated
FooterPre-release
IconStable
Loading spinnerPre-release
LogoStable
NavigationPre-release
NotificationStable
Koros (wave elements)Stable
Radio buttonStable
SelectStable
Selection groupPre-release
Status labelStable
TagPre-release
Text inputStable
Text areaStable
TooltipPre-release
ImageWithCardPre-release
SectionPre-release