compose-preview Compose Glimmer Samples

Status Sign in with GitHub

Settings

Page theme Match the preview theme Follow my system

Selecting a Light or Dark preview theme paints this page to match. Choose Follow my system to keep the page on your operating system's setting.

Keyboard Power-user navigation

Jump between components, variants, modes, and overrides with shortcuts and an on-screen command palette.

Compose Glimmer Samples

glimmer-samples

50 previews · 35 views · hold a card for a live session

Compare againstSVG

Reportsdesign parity

Exploretry in playground

report a catalog issue

Button

Button Button Sample

Button Button Sample

button-buttonsample__ideal__default

Button Button With Leading And Trailing Icon Sample

Button Button With Leading And Trailing Icon Sample

button-buttonwithleadingandtrailingiconsample__ideal__default

Button Button With Leading Icon Sample

Button Button With Leading Icon Sample

button-buttonwithleadingiconsample__ideal__default

Button Button With Trailing Icon Sample

Button Button With Trailing Icon Sample

button-buttonwithtrailingiconsample__ideal__default

Button Large Button Sample

Button Large Button Sample

button-largebuttonsample__ideal__default

Button Large Button With Leading And Trailing Icon Sample

Button Large Button With Leading And Trailing Icon Sample

button-largebuttonwithleadingandtrailingiconsample__ideal__default

Button Large Button With Leading Icon Sample

Button Large Button With Leading Icon Sample

button-largebuttonwithleadingiconsample__ideal__default

Button Large Button With Trailing Icon Sample

Button Large Button With Trailing Icon Sample

button-largebuttonwithtrailingiconsample__ideal__default

Buttongroup

Button Group Button Group Sample

Button Group Button Group Sample

buttongroup-buttongroupsample__ideal__default

Card

Card Action Card With Title And Leading Icon And Header

Card Action Card With Title And Leading Icon And Header

card-actioncardwithtitleandleadingiconandheader__ideal__default

Card Action Card With Title Sample

Card Action Card With Title Sample

card-actioncardwithtitlesample__ideal__default

Card Card Sample

Card Card Sample

card-cardsample__ideal__default

Card Card With Long Text

Card Card With Long Text

card-cardwithlongtext__ideal__default

Card Card With Title And Header Sample

Card Card With Title And Header Sample

card-cardwithtitleandheadersample__ideal__default

Card Card With Title And Leading Icon And Header

Card Card With Title And Leading Icon And Header

card-cardwithtitleandleadingiconandheader__ideal__default

Card Card With Title And Subtitle And Leading Icon And Trailing Icon Long Text

Card Card With Title And Subtitle And Leading Icon And Trailing Icon Long Text

card-cardwithtitleandsubtitleandleadingiconandtrailingiconlongtext__ideal__default

Card Card With Title And Subtitle And Leading Icon Long Text

Card Card With Title And Subtitle And Leading Icon Long Text

card-cardwithtitleandsubtitleandleadingiconlongtext__ideal__default

Card Card With Title And Subtitle And Leading Icon Sample

Card Card With Title And Subtitle And Leading Icon Sample

card-cardwithtitleandsubtitleandleadingiconsample__ideal__default

Card Card With Trailing Icon Sample

Card Card With Trailing Icon Sample

card-cardwithtrailingiconsample__ideal__default

Colors

Colors Colors Sample

Colors Colors Sample

colors-colorssample__ideal__default

Deptheffectlevels

Depth Effect Levels Depth Effect Levels Sample

Depth Effect Levels Depth Effect Levels Sample

deptheffectlevels-deptheffectlevelssample__ideal__default

Glimmerlazylist

Glimmer Lazy List Glimmer Lazy Column Sample

Glimmer Lazy List Glimmer Lazy Column Sample

glimmerlazylist-glimmerlazycolumnsample__ideal__default

Glimmer Lazy List Glimmer Lazy Column With Title Chip Sample

Glimmer Lazy List Glimmer Lazy Column With Title Chip Sample

glimmerlazylist-glimmerlazycolumnwithtitlechipsample__ideal__default

Glimmerpager

Glimmer Pager Glimmer Horizontal Pager Sample

Glimmer Pager Glimmer Horizontal Pager Sample

glimmerpager-glimmerhorizontalpagersample__ideal__default

Icon

Icon Icon Sample Usage

icon-iconsampleusage__ideal__default

Iconbutton

Icon Button Icon Button Sample

Icon Button Icon Button Sample

iconbutton-iconbuttonsample__ideal__default

Icontogglebutton

Icon Toggle Button Icon Toggle Button Sample

Icon Toggle Button Icon Toggle Button Sample

icontogglebutton-icontogglebuttonsample__ideal__default

Indirectpointergesture

Indirect Pointer Gesture On Indirect Pointer Gesture Sample Usage

Indirect Pointer Gesture On Indirect Pointer Gesture Sample Usage

indirectpointergesture-onindirectpointergesturesampleusage__ideal__default

Listitem

List Item Clickable List Item Sample

List Item Clickable List Item Sample

listitem-clickablelistitemsample__ideal__default

List Item Clickable List Item With Supporting Label And Leading Icon Sample

List Item Clickable List Item With Supporting Label And Leading Icon Sample

listitem-clickablelistitemwithsupportinglabelandleadingiconsample__ideal__default

List Item Clickable List Item With Supporting Label Sample

List Item Clickable List Item With Supporting Label Sample

listitem-clickablelistitemwithsupportinglabelsample__ideal__default

List Item List Item Sample

List Item List Item Sample

listitem-listitemsample__ideal__default

List Item List Item With Leading Icon Long Text

List Item List Item With Leading Icon Long Text

listitem-listitemwithleadingiconlongtext__ideal__default

List Item List Item With Supporting Label And Icons

List Item List Item With Supporting Label And Icons

listitem-listitemwithsupportinglabelandicons__ideal__default

List Item List Item With Supporting Label And Leading Icon Long Text

List Item List Item With Supporting Label And Leading Icon Long Text

listitem-listitemwithsupportinglabelandleadingiconlongtext__ideal__default

List Item List Item With Supporting Label And Leading Icon Sample

List Item List Item With Supporting Label And Leading Icon Sample

listitem-listitemwithsupportinglabelandleadingiconsample__ideal__default

List Item List Item With Supporting Label Sample

List Item List Item With Supporting Label Sample

listitem-listitemwithsupportinglabelsample__ideal__default

Shapes

Shapes Shapes Sample

Shapes Shapes Sample

shapes-shapessample__ideal__default

Stack

Stack Vertical Stack Sample

Stack Vertical Stack Sample

stack-verticalstacksample__ideal__default

Surface

Surface Clickable Surface Sample

Surface Clickable Surface Sample

surface-clickablesurfacesample__ideal__default

Surface Focusable Surface Sample

Surface Focusable Surface Sample

surface-focusablesurfacesample__ideal__default

Surface Surface Sample

Surface Surface Sample

surface-surfacesample__ideal__default

Titlechip

Title Chip Title Chip Sample

Title Chip Title Chip Sample

titlechip-titlechipsample__ideal__default

Title Chip Title Chip With Card Sample

Title Chip Title Chip With Card Sample

titlechip-titlechipwithcardsample__ideal__default

Title Chip Title Chip With Leading Icon Sample

Title Chip Title Chip With Leading Icon Sample

titlechip-titlechipwithleadingiconsample__ideal__default

Togglebutton

Toggle Button Large Toggle Button Sample

Toggle Button Large Toggle Button Sample

togglebutton-largetogglebuttonsample__ideal__default

Toggle Button Toggle Button Sample

Toggle Button Toggle Button Sample

togglebutton-togglebuttonsample__ideal__default

Toggle Button Toggle Button With Leading Icon Sample

Toggle Button Toggle Button With Leading Icon Sample

togglebutton-togglebuttonwithleadingiconsample__ideal__default

Toggle Button Toggle Button With Trailing Icon Sample

Toggle Button Toggle Button With Trailing Icon Sample

togglebutton-togglebuttonwithtrailingiconsample__ideal__default

Typography

Typography Typography Default Usage

Typography Typography Default Usage

typography-typographydefaultusage__ideal__default

download all (.zip)