Components — Sandvik Design System

Brand

Logo

<sds-logo>

The legally-protected Sandvik mark in its three web forms — logotype (lock-up), symbol and wordmark. Drawn with currentColor, so it follows the theme (black on light, white on dark); set --sds-logo-color to override and --sds-logo-size for the height. Never recolor beyond black/white, distort, or crowd it (keep clear space ≥ ⅓ of the symbol's height).

<sds-logo label="Sandvik"></sds-logo>
<sds-logo variant="symbol" label="Sandvik symbol"></sds-logo>
<sds-logo variant="wordmark" label="Sandvik"></sds-logo>

<!-- size by height; color follows the theme or --sds-logo-color -->
<sds-logo style="--sds-logo-size: 3rem"></sds-logo>

Actions

Button

<sds-button>

Primary, secondary and link variants in three sizes (s 32, m 40, l 48), with optional leading/trailing icon slots. Use size="l" to sit a button inline with a form field on one row (it matches the field height).

Primary

Small

Large

Secondary

Link

Disabled

<sds-button>Primary</sds-button>
<sds-button size="s">Small</sds-button>
<sds-button size="l">Large</sds-button>
<sds-button variant="secondary">Secondary</sds-button>
<sds-button variant="link">Link</sds-button>
<sds-button disabled>Disabled</sds-button>

Tag

<sds-tag>

Outlined by default; fills with a system color when selected. Click to toggle.

Structural products

Telecom

Land-based radar

Laser comms

Archived

Disabled

<sds-tag>Structural products</sds-tag>
<sds-tag color="blue" selected>Telecom</sds-tag>
<sds-tag color="orange" selected>Land-based radar</sds-tag>
<sds-tag color="green" selected>Laser comms</sds-tag>
<sds-tag color="black" selected>Archived</sds-tag>

Toggle

<sds-toggle>

An on/off switch with the label on either side. Fires a composed change event.

Label left (default)

On — vibrant orange

Label right

Disabled

<sds-toggle>Label left (default)</sds-toggle>
<sds-toggle checked>On</sds-toggle>
<sds-toggle label-position="right">Label right</sds-toggle>
<sds-toggle disabled>Disabled</sds-toggle>

Forms

Text input

<sds-input>

Labelled field for text, email, number, date, password, tel and search types. The label sits above the field box (same placement as <sds-select>, so the two line up in a form grid). A helper hint sits beneath the field; when error is set, its error-message replaces the hint in the same spot — so a row of fields stays aligned.

<!-- helper = hint text beneath the field -->
<sds-input label="First name" value="Johansson"
  helper="As it appears on your ID"></sds-input>

<!-- error-message replaces the hint in the same position -->
<sds-input label="Email" type="email" error
  error-message="Please fill in this field"></sds-input>

<sds-input label="Disabled" value="Read only" disabled></sds-input>

Inline field + button. For a one-row pairing (e.g. apply a code), use a label-less field and a matching-height size="l" button:

Apply

<div style="display:flex; align-items:end; gap:12px">
  <sds-input placeholder="Contract code"></sds-input>
  <sds-button size="l" variant="secondary">Apply</sds-button>
</div>

Checkbox

<sds-checkbox>

Standard, indeterminate (mixed), error and disabled states.

Unchecked

Checked

Mixed

Error

Disabled

<sds-checkbox>Unchecked</sds-checkbox>
<sds-checkbox checked>Checked</sds-checkbox>
<sds-checkbox indeterminate>Mixed</sds-checkbox>
<sds-checkbox error>Error</sds-checkbox>
<sds-checkbox disabled>Disabled</sds-checkbox>

Radio

<sds-radio-group>

A single-choice group with roving keyboard focus. Wrap <sds-radio> options in an <sds-radio-group>.

Maintenance

Repair

Inspection

Unavailable

<sds-radio-group label="Service category" value="b">
  <sds-radio value="a">Maintenance</sds-radio>
  <sds-radio value="b">Repair</sds-radio>
  <sds-radio value="c">Inspection</sds-radio>
  <sds-radio value="d" disabled>Unavailable</sds-radio>
</sds-radio-group>

Select

<sds-select>

A dropdown of <sds-option> items with full keyboard support and disabled options.

Sweden

Germany

United States

Japan (unavailable)

<sds-select label="Country">
  <sds-option value="se">Sweden</sds-option>
  <sds-option value="de">Germany</sds-option>
  <sds-option value="us">United States</sds-option>
  <sds-option value="jp" disabled>Japan</sds-option>
</sds-select>

Search

<sds-search>

A search field with a leading icon and a trailing clear control once text is entered.

<sds-search placeholder="Search…"></sds-search>
<sds-search value="Performance"></sds-search>

Navigation

Tabs

<sds-tabs>

Switch between peer views. Tabs and panels pair by matching value; slot="panel" marks the panels.

Overview

Specifications

Support

Precision cutting tools engineered for maximum efficiency.

Carbide composite · 300–500 m/min · ±0.01 mm tolerance.

Support content.

<sds-tabs selected="overview">
  <sds-tab value="overview">Overview</sds-tab>
  <sds-tab value="specs">Specifications</sds-tab>
  <sds-tab-panel slot="panel" value="overview">…</sds-tab-panel>
  <sds-tab-panel slot="panel" value="specs">…</sds-tab-panel>
</sds-tabs>

Breadcrumbs

<sds-breadcrumbs>

A navigation trail. The last item is marked the current page automatically when none is set.

Home

Products

Turning solutions

DNMG inserts

<sds-breadcrumbs>
  <sds-breadcrumb-item href="/">Home</sds-breadcrumb-item>
  <sds-breadcrumb-item href="/products">Products</sds-breadcrumb-item>
  <sds-breadcrumb-item current>DNMG inserts</sds-breadcrumb-item>
</sds-breadcrumbs>

Side nav

<sds-sidenav>

Vertical navigation with single selection and roving focus. The context sets the active color (group: orange, ba: gold).

Tools & inserts

Support

About

Legacy (disabled)

<sds-sidenav value="tools" context="group" label="Main navigation">
  <sds-sidenav-item value="tools">Tools &amp; inserts</sds-sidenav-item>
  <sds-sidenav-item value="support">Support</sds-sidenav-item>
  <sds-sidenav-item value="about">About</sds-sidenav-item>
</sds-sidenav>

Top nav

<sds-top-nav>

Horizontal application bar — a brand region, a row of nav items with an active indicator, and an actions region. The context sets the active color (group: orange, ba: gold).

About us

Offering

Investors

Careers

Account

<sds-top-nav value="offering" context="group" label="Main navigation">
  <sds-logo slot="brand" variant="logotype" label="Sandvik"></sds-logo>
  <sds-top-nav-item value="about">About us</sds-top-nav-item>
  <sds-top-nav-item value="offering">Offering</sds-top-nav-item>
  <sds-top-nav-item value="investors">Investors</sds-top-nav-item>
  <sds-button slot="actions" variant="secondary" size="s">Account</sds-button>
</sds-top-nav>

Pagination

<sds-pagination>

Three forms — numbered steps, indicator dots, or stepless prev/next. Fires a composed change with the 1-based page.

Stepped

Indicators

Stepless

<sds-pagination type="stepped" total="15" current="3"></sds-pagination>
<sds-pagination type="indicators" total="8" current="4"></sds-pagination>
<sds-pagination type="stepless" total="20" current="7" show-numbers></sds-pagination>

Stepper

<sds-stepper>

Sequential progress through numbered steps, horizontal or vertical. current is the 0-based active step.

Project briefing

Tool selection

Production run

Quality inspection

<sds-stepper orientation="horizontal" current="1">
  <sds-step>Project briefing</sds-step>
  <sds-step progress="45">Tool selection</sds-step>
  <sds-step>Production run</sds-step>
  <sds-step>Quality inspection</sds-step>
</sds-stepper>

Data display

Table

<sds-table>

Composable data table with selection, sortable headers, density and per-cell alignment.

Product

Quantity

Unit price

Status

DNMG insert

150

$24.50

In stock

Thread mill T-Max

45

$89.99

Ordering

Groove turning tool

200

$15.75

Low stock

<sds-table selects="multiple" density="regular">
  <sds-table-head>
    <sds-table-head-cell sortable sort-key="product">Product</sds-table-head-cell>
    <sds-table-head-cell align="right">Unit price</sds-table-head-cell>
  </sds-table-head>
  <sds-table-body>
    <sds-table-row value="r1">
      <sds-table-cell>DNMG insert</sds-table-cell>
      <sds-table-cell align="right">$24.50</sds-table-cell>
    </sds-table-row>
  </sds-table-body>
</sds-table>

Card

<sds-card>

A teaser container with optional eyebrow, media, body and actions slots, and a gold or orange accent.

Coromant

Precision solutions

Cutting tools for high-volume machining.

Learn more

Featured

New release

Discover the latest innovations in tool technology.

Explore

<sds-card accent="gold">
  <span slot="eyebrow">Coromant</span>
  <h3>Precision solutions</h3>
  <p>Cutting tools for high-volume machining.</p>
  <div slot="actions"><sds-button>Learn more</sds-button></div>
</sds-card>

Badge

<sds-badge>

A small, static count indicator (cart items, unread, alerts) in the brand colors. Indicative and numeric — not interactive; for clickable chips use <sds-tag>.

3

12

9

5

1

<sds-badge color="blue">3</sds-badge>
<sds-badge color="orange">12</sds-badge>
<sds-badge color="gold">5</sds-badge>

Accordion

<sds-accordion>

Expandable entries; add single-open to keep only one open at a time.

Tungsten carbide particles bonded with cobalt, delivering superior hardness and wear resistance.

Selection depends on material, cutting conditions and surface-finish requirements.

A standard 12-month manufacturer's warranty covers material and workmanship.

<sds-accordion single-open>
  <sds-accordion-item heading="What is carbide?" open>…</sds-accordion-item>
  <sds-accordion-item heading="How do I select an insert?">…</sds-accordion-item>
</sds-accordion>

Divider

<sds-divider>

A horizontal or vertical rule in three weights.

Thin (s)

Medium (m)

Heavy (l)

<sds-divider size="s"></sds-divider>
<sds-divider></sds-divider>
<sds-divider size="l"></sds-divider>

Profile image

<sds-profile-image>

A circular avatar in three sizes, falling back to initials derived from alt when there's no image.

<sds-profile-image size="small" alt="Maria Rodriguez"></sds-profile-image>
<sds-profile-image size="medium" alt="John Smith"></sds-profile-image>
<sds-profile-image size="large" initials="SD" alt="Sandvik Design"></sds-profile-image>

Feedback & overlay

Modal

<sds-modal>

A dialog over a scrim — centered or as a right-hand drawer. Fires a composed close event.

Open centered modal

Open drawer

<sds-button onclick="modal.open = true">Open</sds-button>

<sds-modal id="modal" position="center" closable heading="Confirm order">
  <h2 slot="title">Confirm your order</h2>
  <p>You are about to order 150 inserts.</p>
  <div slot="actions">
    <sds-button variant="secondary">Cancel</sds-button>
    <sds-button>Confirm</sds-button>
  </div>
</sds-modal>

Tooltip

<sds-tooltip>

Supplementary text on hover or focus. Wraps a focusable trigger and auto-flips to stay in view.

Hover me — top

Hover me — right

<sds-tooltip placement="top" text="Browse the catalog">
  <sds-button>Hover me</sds-button>
</sds-tooltip>

Toast

<sds-toast>

A notification bar with an optional headline, action slot and dismiss control. urgent switches to role="alert".

Order #12345 has been dispatched. Tracking: TRK987654321. Track now

Stock for DNMG 110304 inserts is running low. Reorder recommended.

<sds-toast open dismissable headline="Order shipped">
  Order #12345 has been dispatched.
  <sds-button slot="action" variant="secondary">Track now</sds-button>
</sds-toast>

<sds-toast open urgent dismissable headline="Inventory alert">
  Stock is running low.
</sds-toast>

Loader

<sds-loader>

A circular progress indicator — indeterminate by default, or determinate with a value. Sizes from the context font-size.

<sds-loader label="Processing"></sds-loader>
<sds-loader value="65" label="Download progress"></sds-loader>

Progress bar

<sds-progress-bar>

A linear indicator — passive, or interactive with a draggable handle for media scrubbing.

<sds-progress-bar value="45" label="Video playback"></sds-progress-bar>
<sds-progress-bar value="30" handle variant="ba" label="Timeline"></sds-progress-bar>