Skip to main content
Version: EDS 2.0 (beta)

Components

Components

Components are interactive building blocks for creating a user interface. Browse by category below, or use the sidebar to jump directly to a component.

EDS 2.0 is in beta: safe to adopt alongside EDS 1. The API may still change in small ways before it ships as eds-core-react 3.0.0.

Data Display

Present information, status, structure, or relationships.

Chip
Compact interactive elements for filtering, tagging, and selections.
Icon
Visual symbols communicating meaning at a glance with auto-sizing.
Explore more actions
Tooltip
Brief information shown on hover or focus without cluttering the interface.

Feedback

Communicate progress, results, validation, or system state.

Changes saved successfully.

This action cannot be undone.

Banner
Important messages with optional actions for informing, warning, or alerting.

Inputs

Capture and validate user data or choices.

Button
Trigger actions with hierarchy variants and intent-driven tones.
TextField
Complete form field combining label, description, input, and validation.
TextArea
Multiline text input with auto-growing height and full accessibility.
Search
Quickly locate content with a search input and clear button.
Selection Controls
Checkboxes, radios, and switches for toggling options and making selections.
$
Input
Foundational form element for collecting user data with full control.

Please fill in this field

Field
Layout primitive connecting labels and helpers accessibly to controls.
  • Norway
  • Brazil
  • United Kingdom
Autocomplete
Searchable dropdown for selecting a value from a filtered list of options.

Navigation

Help users move through content and hierarchies.

Getting startedView documentationBack to overview
Link
Clickable text navigating users to pages, documents, or locations.

Surfaces

Structural or container elements that organise and layer content.

What is EDS?
Equinor's official design system.
How do I get access?
See the getting-started guides.
Accordion
Expandable sections that reveal content on demand to keep pages compact.
Section ADetails
Section BDetails
Section CDetails
Divider
Thin horizontal rule separating related content into distinct sections.

Explore in Storybook

An interactive Storybook is available for all developed components — explore variants, props, accessibility notes, and usage examples. If you cannot find a component or need to propose a new one, open an issue describing the use case.

Open Storybook