Slides

Buttons

Button Types

Ghost Variants

Outline Variants

Icons and Rounded Buttons

Button Sizes

Button Loaders

Form fields

Inputs

Text input with inline label

Text input

Text input validation error

!

This field is required

Text input with prefix

https://

Text input with suffix

.slides.com

Text with suffix and tray

.slides.com

5min

10min

20min

30min

40min

50min

60min

Text with prefix and tray

https://

5min

10min

20min

30min

40min

50min

60min

Multiline input

Errors and deprecation warnings

This is an error explanation that can be used to explain the error.

This is a deprecation warning that can be used to warn the user about a deprecated feature.

Checkboxes

Checkbox

Checkbox with a very long label that demonstrates text wrapping

Checkbox Stack

Checkbox 2

Checkbox 1 This is a long description that can be used to explain the checkbox.

Checkbox 2 This is a long description that can be used to explain the checkbox.

Checkbox 3 This is a long description that can be used to explain the checkbox.

Selects

Pills

Numeric Range

Range: 0-100

Range: 100-500px

Range: 0-1em

Range Slider

Range: 0-10

Range: 5-15

Range: 0-10 with value

10

Radio Buttons

Harder Better Faster - Stronger

Radio Buttons

Can contain multiline
descriptions.

Better Faster - Stronger

Radio Buttons (subtle)

Harder Better Faster - Stronger

Radio Buttons — Thumbs

Default

Fullscreen

Scroll

Radio Buttons — Segmented Control

My uploads Search Unsplash My team

Datepicker

Automatically disable this link on

Image uploader

Empty

Populated

Dark (team logo)

Badges

Inline labels for status, defaults, and metadata. Use semantic variants; combine with sl-badge-s for a compact size. Outline style works on tinted or busy backgrounds (e.g. documentation).

Semantic variants

Neutral (base) Neutral (explicit) Published Beta Deprecated Error Pro

Small size

Tiny Live API Soon Failed New

Outline

Outline Success Info Warning Danger

On a panel surface

Typical documentation / settings context

Recommended Optional REST AI

Dark

Text

text-strong

text

text-secondary

text-muted

text-subtle

text-faint

Hover

hover-subtle

hover

hover-strong

hover-stronger

hover-strongest

Inset

inset

inset-strong

Border

border-subtle

border-default

border-strong

border-stronger

border-strongest

border-code

Surface

surface-inverse

surface-glass

surface-raised

surface-raised-strong

surface-raised-stronger

Controls

Status

positive

warning

danger

Text

text-strong

text

text-secondary

text-muted

text-subtle

text-faint

Hover

hover-subtle

hover

hover-strong

hover-stronger

hover-strongest

Inset

inset

inset-strong

Border

border-subtle

border-default

border-strong

border-stronger

border-strongest

border-code

Surface

surface-inverse

surface-glass

surface-raised

surface-raised-strong

surface-raised-stronger

Controls

Status

positive

warning

danger

Text

text-strong

text

text-secondary

text-muted

text-subtle

text-faint

Hover

hover-subtle

hover

hover-strong

hover-stronger

hover-strongest

Inset

inset

inset-strong

Border

border-subtle

border-default

border-strong

border-stronger

border-strongest

border-code

Surface

surface-inverse

surface-glass

surface-raised

surface-raised-strong

surface-raised-stronger

Controls

Status

positive

warning

danger

Text

text-strong

text

text-secondary

text-muted

text-subtle

text-faint

Hover

hover-subtle

hover

hover-strong

hover-stronger

hover-strongest

Inset

inset

inset-strong

Border

border-subtle

border-default

border-strong

border-stronger

border-strongest

border-code

Surface

surface-inverse

surface-glass

surface-raised

surface-raised-strong

surface-raised-stronger

Controls

Status

positive

warning

danger

Text

text-strong

text

text-secondary

text-muted

text-subtle

text-faint

Hover

hover-subtle

hover

hover-strong

hover-stronger

hover-strongest

Inset

inset

inset-strong

Border

border-subtle

border-default

border-strong

border-stronger

border-strongest

border-code

Surface

surface-inverse

surface-glass

surface-raised

surface-raised-strong

surface-raised-stronger

Controls

Status

positive

warning

danger

Light

Text

text-strong

text

text-secondary

text-muted

text-subtle

text-faint

Hover

hover-subtle

hover

hover-strong

hover-stronger

hover-strongest

Inset

inset

inset-strong

Border

border-subtle

border-default

border-strong

border-stronger

border-strongest

border-code

Surface

surface-inverse

surface-glass

surface-raised

surface-raised-strong

surface-raised-stronger

Controls

Status

positive

warning

danger

Text

text-strong

text

text-secondary

text-muted

text-subtle

text-faint

Hover

hover-subtle

hover

hover-strong

hover-stronger

hover-strongest

Inset

inset

inset-strong

Border

border-subtle

border-default

border-strong

border-stronger

border-strongest

border-code

Surface

surface-inverse

surface-glass

surface-raised

surface-raised-strong

surface-raised-stronger

Controls

Status

positive

warning

danger

Text

text-strong

text

text-secondary

text-muted

text-subtle

text-faint

Hover

hover-subtle

hover

hover-strong

hover-stronger

hover-strongest

Inset

inset

inset-strong

Border

border-subtle

border-default

border-strong

border-stronger

border-strongest

border-code

Surface

surface-inverse

surface-glass

surface-raised

surface-raised-strong

surface-raised-stronger

Controls

Status

positive

warning

danger

Text

text-strong

text

text-secondary

text-muted

text-subtle

text-faint

Hover

hover-subtle

hover

hover-strong

hover-stronger

hover-strongest

Inset

inset

inset-strong

Border

border-subtle

border-default

border-strong

border-stronger

border-strongest

border-code

Surface

surface-inverse

surface-glass

surface-raised

surface-raised-strong

surface-raised-stronger

Controls

Status

positive

warning

danger

Text

text-strong

text

text-secondary

text-muted

text-subtle

text-faint

Hover

hover-subtle

hover

hover-strong

hover-stronger

hover-strongest

Inset

inset

inset-strong

Border

border-subtle

border-default

border-strong

border-stronger

border-strongest

border-code

Surface

surface-inverse

surface-glass

surface-raised

surface-raised-strong

surface-raised-stronger

Controls

Status

positive

warning

danger

Meter

Storage 10% used

Storage 50% used

Storage 90% used

Storage 120% used

Notification

Custom Notifications

Popout

Basic Popouts

Custom Popouts

Settings

Popup

Tray

Tooltip

Cropper

Transition list

Tables

Table: Editor

Table: Default

Plan	Seats	Status
Starter	3	Active
Team	12	Trial
Enterprise	48	Paused

Table: Stripes

Plan	Seats	Status
Starter	3	Active
Team	12	Trial
Enterprise	48	Paused

Table: Cards

Plan	Seats	Status
Starter	3	Active
Team	12	Trial
Enterprise	48	Paused

Overflow shadow

One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
Twelve
Thirteen
Fourteen
Fifteen
Sixteen

One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
Twelve
Thirteen
Fourteen
Fifteen
Sixteen

Magnificent List of Things

One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
Twelve
Thirteen
Fourteen
Fifteen
Sixteen

Buttons

Button Types

Ghost Variants

Outline Variants

Icons and Rounded Buttons

Button Sizes

Button Loaders

Form fields

Inputs

Checkboxes

Checkbox Stack

Selects

Pills

Numeric Range

Range Slider

Radio Buttons

Radio Buttons (subtle)

Radio Buttons — Thumbs

Radio Buttons — Segmented Control

Datepicker

Image uploader

Badges

Semantic variants

Small size

Outline

On a panel surface

Dark

Light

Meter

Notification

Custom Notifications

Popout

Basic Popouts

Custom Popouts

Settings

Popup

Menu

Configurations

Alignment

Tray

Tooltip

Cropper

Transition list

Tables

Table: Editor

Table: Default

Table: Stripes

Table: Cards

Overflow shadow

Loaders & animations

Logo loading

Logo hover