Spectrum 2
Light
Medium
Left to right
πΊπΈ
Skip to sidebar
Skip to canvas
Search for components
β K
Guides
Contributing
Deprecation workflow
Design tokens
Migration guide
Release workflow
Adobe Code of Conduct
Components
Accordion
Action bar
Action button
Action group
Action menu
Alert banner
Alert dialog
Asset
Asset card
Asset list
Avatar
Badge
Breadcrumbs
Button
Button group
Calendar
Card
Checkbox
Clear button
Close button
Coach indicator
Coach mark
Color area
Color handle
Color loupe
Color slider
Color wheel
Combobox
Contextual help
Date picker
Dial
Dialog
Divider
Drop indicator
Drop zone
Field group
Field label
Floating action button
Form
Help text
Icon
Illustrated message
In-field button
Docs
Default
Skip to canvas
In-line alert
Link
Logic button
Menu
Meter
Miller columns
Modal
Opacity checkerboard
Pagination
Picker
Picker button
Popover
Progress bar
Progress circle
Radio
Rating
Search
Side nav
Slider
Split view
Status light
Steplist
Stepper
Swatch
Swatch group
Switch
Table
Tabs
Tag
Tag group
Text area
Text field
Thumbnail
Toast
Tooltip
Tray
Tree view
Typography
Underlay
Well
Spectrum web components
Recently opened
In-field button
Components
Controls
8
Actions
HTML
Accessibility
Interactions
Visual tests
Design
Addons
Name
Description
Default
Control
Hide Component items
Component
Hide Component items
Position
*
string
-
Choose option...
left
right
top
bottom
Size
*
string
-
Choose option...
Small
Medium
Large
Extra-large
Quiet styling
boolean
-
False
True
Hide Content items
Content
Hide Content items
Workflow icons
string
-
Choose option...
123
3DMaterials
ABC
AEMScreens
Actions
AdDisplay
AdPrint
Add
AddCircle
AddTo
AddToSelection
Airplane
Alert
AlertAdd
AlertCheck
AlertCircle
AlertCircleFilled
Algorithm
Alias
AlignBottom
AlignCenter
AlignLeft
AlignMiddle
AlignRight
AlignTop
Amusementpark
Anchor
AnchorSelect
Annotate
AnnotatePen
Answer
AnswerFavorite
App
AppRefresh
AppleFiles
ApplicationDelivery
ApproveReject
Apps
Archive
ArchiveRemove
ArrowDown
ArrowLeft
ArrowRight
ArrowUp
ArrowUpRight
Artboard
Article
Asset
AssetCheck
AssetsAdded
AssetsDownloaded
AssetsExpired
AssetsLinkedPublished
AssetsModified
AssetsPublished
Asterisk
At
Attach
AttachmentExclude
Attributes
Audio
AutomatedSegment
Back
Back30Seconds
BackAndroid
Beaker
BeakerCheck
BeakerShare
Bell
BidRule
BidRuleAdd
Blower
Blur
Book
Bookmark
BookmarkSingle
BookmarkSingleOutline
BookmarkSmall
BookmarkSmallOutline
Boolean
Border
Box
BoxAdd
BoxExport
BoxImport
Brackets
BracketsSquare
Branch1
Branch2
Branch3
BranchCircle
BreadcrumbNavigation
Breakdown
BreakdownAdd
Briefcase
Browse
Brush
Bug
Building
BulkEditUsers
Button
CCLibrary
Calculator
Calendar
CalendarAdd
CalendarLocked
CalendarUnlocked
CallCenter
Camera
CameraFlip
CameraRefresh
Campaign
CampaignAdd
CampaignClose
CampaignDelete
CampaignEdit
Cancel
Capitals
Captcha
Car
Card
Channel
Chat
ChatAdd
CheckPause
Checkmark
CheckmarkCircle
CheckmarkCircleOutline
ChevronDoubleLeft
ChevronDoubleRight
ChevronDown
ChevronLeft
ChevronRight
ChevronUp
ChevronUpDown
Circle
CircleFilled
ClassicGridView
Clock
ClockCheck
CloneStamp
Close
CloseCaptions
CloseCircle
Cloud
CloudDisconnected
CloudError
CloudOutline
Code
Collection
CollectionAdd
CollectionAddTo
CollectionCheck
CollectionEdit
CollectionExclude
CollectionLink
ColorFill
ColorPalette
ColorWheel
ColumnSettings
ColumnTwoA
ColumnTwoB
ColumnTwoC
Comment
Compare
Compass
Condition
ConfidenceFour
ConfidenceOne
ConfidenceThree
ConfidenceTwo
Contrast
ConversionFunnel
Copy
CoverImage
CreditCard
Crop
CropLightning
CropRotate
Crosshairs
Curate
Cut
Dashboard
Data
DataAdd
DataBook
DataCheck
DataCorrelated
DataDownload
DataEdit
DataMapping
DataRefresh
DataRemove
DataSettings
DataUnavailable
DataUpload
DataUser
Date
DateInput
Deduplication
Delegate
Delete
DeleteOutline
Demographic
Deselect
DeselectCircular
DesktopAndMobile
DeviceDesktop
DeviceLaptop
DevicePhone
DevicePhoneRefresh
DevicePreview
DeviceRotateLandscape
DeviceRotatePortrait
DeviceTV
DeviceTablet
Devices
DistributeBottomEdge
DistributeHorizontalCenter
DistributeHorizontally
DistributeLeftEdge
DistributeRightEdge
DistributeSpaceHoriz
DistributeSpaceVert
DistributeTopEdge
DistributeVerticalCenter
DistributeVertically
Divide
DividePath
Document
DocumentFragment
DocumentFragmentGroup
DocumentOutline
DocumentRefresh
Dolly
Download
DownloadFromCloud
DownloadFromCloudOutline
Draft
DragHandle
Draw
Dropdown
Duplicate
Edit
EditCircle
EditExclude
EditIn
EditInLight
Education
Effects
Efficient
Ellipse
Email
EmailCancel
EmailCheck
EmailExclude
EmailExcludeOutline
EmailGear
EmailGearOutline
EmailKey
EmailKeyOutline
EmailLightning
EmailNotification
EmailOutline
EmailRefresh
EmailSchedule
Engagement
Erase
Event
EventExclude
EventShare
Events
ExcludeOverlap
Experience
ExperienceAdd
ExperienceAddTo
ExperienceExport
ExperienceImport
Export
ExportOriginal
Exposure
Extension
FacebookCoverImage
Fast
FastForward
FastForwardCircle
Feature
Feed
FeedAdd
FeedManagement
Feedback
FileAdd
FileCSV
FileCampaign
FileChart
FileCheckedOut
FileCode
FileData
FileEmail
FileExcel
FileFolder
FileGear
FileGlobe
FileHTML
FileImportant
FileJson
FileKey
FileMobile
FilePDF
FileShare
FileSingleWebPage
FileSpace
FileTemplate
FileTxt
FileUser
FileWord
FileWorkflow
FileXML
FileZip
FilingCabinet
Filmroll
FilmrollAutoAdd
Filter
FilterAdd
FilterCheck
FilterDelete
FilterEdit
FilterHeart
FilterRemove
FilterStar
FindAndReplace
Flag
FlagExclude
FlashAuto
FlashOff
FlashOn
Flashlight
FlashlightOff
FlashlightOn
FlipHorizontal
FlipVertical
Folder
Folder2Color
FolderAdd
FolderAddTo
FolderArchive
FolderDelete
FolderGear
FolderLocked
FolderOpen
FolderOpenOutline
FolderOutline
FolderRemove
FolderSearch
FolderUser
Follow
FollowOff
ForPlacementOnly
Forecast
Form
Forward
FullScreen
FullScreenExit
Function
Game
Gauge1
Gauge2
Gauge3
Gauge4
Gauge5
Gears
GearsAdd
GearsDelete
GearsEdit
GenderFemale
GenderMale
Gift
Globe
GlobeCheck
GlobeClock
GlobeEnter
GlobeExit
GlobeGrid
GlobeOutline
GlobeRemove
GlobeSearch
GlobeStrike
GlobeStrikeClock
Gradient
GraphArea
GraphAreaStacked
GraphBarHorizontal
GraphBarHorizontalAdd
GraphBarHorizontalStacked
GraphBarVertical
GraphBarVerticalAdd
GraphBarVerticalStacked
GraphBubble
GraphBullet
GraphConfidenceBands
GraphDonut
GraphDonutAdd
GraphGantt
GraphHistogram
GraphPathing
GraphPie
GraphProfitCurve
GraphScatter
GraphStream
GraphStreamRanked
GraphStreamRankedAdd
GraphSunburst
GraphTree
GraphTrend
GraphTrendAdd
GraphTrendAlert
Graphic
Group
Hammer
Hand
Hand0
Hand1
Hand2
Hand3
Hand4
Heal
Heart
Help
HelpOutline
Histogram
History
Home
Homepage
HotFixes
HotelBed
IdentityService
Image
ImageAdd
ImageAlbum
ImageAutoMode
ImageCarousel
ImageCheck
ImageCheckedOut
ImageMapCircle
ImageMapPolygon
ImageMapRectangle
ImageNext
ImageProfile
ImageSearch
ImageText
Images
Import
Inbox
Individual
Info
InfoOutline
IntersectOverlap
InvertAdj
Invite
Journey
JourneyAction
JourneyData
JourneyEvent
JourneyEvent2
JourneyReports
JourneyVoyager
JumpToTop
Key
KeyClock
KeyExclude
Keyboard
Label
LabelExclude
Labels
Landscape
Launch
Layers
LayersBackward
LayersBringToFront
LayersForward
LayersSendToBack
Light
Line
LineHeight
LinearGradient
Link
LinkCheck
LinkGlobe
LinkNav
LinkOff
LinkOut
LinkOutLight
LinkPage
LinkUser
Location
LocationBasedDate
LocationBasedEvent
LocationContribution
LockClosed
LockOpen
LogOut
Login
Looks
LoupeView
MBox
MagicWand
Magnify
Mailbox
MapView
MarginBottom
MarginLeft
MarginRight
MarginTop
MarketingActivities
Maximize
Measure
Menu
Merge
MergeLayers
Messenger
Minimize
MobileServices
ModernGridView
Money
Monitoring
Moon
More
MoreCircle
MoreSmall
MoreSmallList
MoreSmallListVert
MoreVertical
Move
MoveLeftRight
MoveTo
MoveUpDown
MovieCamera
Multiple
MultipleAdd
MultipleCheck
MultipleExclude
NamingOrder
NewItem
News
NewsAdd
NoEdit
Note
NoteAdd
OS
Offer
OfferDelete
OnAir
OpenIn
OpenInLight
OpenRecent
OpenRecentOutline
Orbit
Organisations
Organize
OutlinePath
PaddingBottom
PaddingLeft
PaddingRight
PaddingTop
PageBreak
PageExclude
PageGear
PageRule
PageShare
PageTag
PagesExclude
Pan
Panel
Paste
PasteHTML
PasteList
PasteText
Pattern
Pause
PauseCircle
Pawn
Pending
PeopleGroup
PersonalizationField
Perspective
PinOff
PinOn
Pivot
PlatformDataMapping
Play
PlayCircle
Plug
Polygon
PolygonSelect
PopIn
Portrait
Preset
Preview
Print
PrintPreview
Project
ProjectAdd
ProjectEdit
ProjectNameEdit
Promote
Properties
PropertiesCopy
PublishCheck
PublishPending
PublishReject
PublishRemove
PublishSchedule
PushNotification
Question
QuickSelect
RSS
RadialGradient
Rail
RailBottom
RailLeft
RailRight
RailRightClose
RailRightOpen
RailTop
RangeMask
RealTimeCustomerProfile
RectSelect
Rectangle
Redo
Refresh
RegionSelect
Relevance
Remove
RemoveCircle
Rename
Reorder
Replay
Replies
Reply
ReplyAll
Report
ReportAdd
Resize
Retweet
Reuse
Revenue
Revert
Rewind
RewindCircle
Ribbon
RotateCCW
RotateCCWBold
RotateCW
RotateCWBold
RotateLeft
RotateLeftOutline
RotateRight
RotateRightOutline
SMS
SMSKey
SMSLightning
SMSRefresh
SQLQuery
Sampler
Sandbox
SaveAsFloppy
SaveFloppy
SaveTo
SaveToLight
Scribble
Search
Seat
SeatAdd
Segmentation
Segments
Select
SelectAdd
SelectBox
SelectBoxAll
SelectCircular
SelectContainer
SelectGear
SelectIntersect
SelectSubtract
Selection
SelectionChecked
SelectionMove
Send
SentimentNegative
SentimentNeutral
SentimentPositive
Separator
Servers
Settings
Shapes
Share
ShareAndroid
ShareCheck
ShareLight
ShareWindows
Sharpen
Shield
Ship
Shop
ShoppingCart
ShowAllLayers
ShowMenu
ShowOneLayer
Shuffle
Slice
Slow
SmallCaps
Snapshot
SocialNetwork
SortOrderDown
SortOrderUp
Spam
Spellcheck
Spin
SplitView
SpotHeal
Stadium
Stage
Stamp
Star
StarOutline
Starburst
StepBackward
StepBackwardCircle
StepForward
StepForwardCircle
Stop
StopCircle
Stopwatch
Straighten
StraightenOutline
StrokeWidth
Subscribe
SubtractBackPath
SubtractFromSelection
SubtractFrontPath
SuccessMetric
Summarize
Survey
Switch
Sync
SyncRemove
Table
TableAdd
TableAndChart
TableColumnAddLeft
TableColumnAddRight
TableColumnMerge
TableColumnRemoveCenter
TableColumnSplit
TableEdit
TableHistogram
TableMergeCells
TableRowAddBottom
TableRowAddTop
TableRowMerge
TableRowRemoveCenter
TableRowSplit
TableSelectColumn
TableSelectRow
TagBold
TagItalic
TagUnderline
Target
Targeted
TaskList
Teapot
Temperature
TestAB
TestABEdit
TestABGear
TestABRemove
TestProfile
Text
TextAdd
TextAlignCenter
TextAlignJustify
TextAlignLeft
TextAlignRight
TextBaselineShift
TextBold
TextBulleted
TextBulletedAttach
TextBulletedHierarchy
TextBulletedHierarchyExclude
TextColor
TextDecrease
TextEdit
TextExclude
TextIncrease
TextIndentDecrease
TextIndentIncrease
TextItalic
TextKerning
TextLetteredLowerCase
TextLetteredUpperCase
TextNumbered
TextParagraph
TextRomanLowercase
TextRomanUppercase
TextSize
TextSizeAdd
TextSpaceAfter
TextSpaceBefore
TextStrikethrough
TextStroke
TextStyle
TextSubscript
TextSuperscript
TextTracking
TextUnderline
ThumbDown
ThumbDownOutline
ThumbUp
ThumbUpOutline
Tips
Train
TransferToPlatform
Transparency
Trap
TreeCollapse
TreeCollapseAll
TreeExpand
TreeExpandAll
TrendInspect
TrimPath
Trophy
Type
USA
Underline
Undo
Ungroup
Unlink
Unmerge
UploadToCloud
UploadToCloudOutline
User
UserActivity
UserAdd
UserAdmin
UserArrow
UserCheckedOut
UserDeveloper
UserEdit
UserExclude
UserGroup
UserLock
UserShare
UsersAdd
UsersExclude
UsersLock
UsersShare
Variable
VectorDraw
VideoCheckedOut
VideoFilled
VideoOutline
ViewAllTags
ViewBiWeek
ViewCard
ViewColumn
ViewDay
ViewDetail
ViewGrid
ViewList
ViewRow
ViewSingle
ViewStack
ViewWeek
ViewedMarkAs
Vignette
Visibility
VisibilityOff
Visit
VisitShare
VoiceOver
VolumeMute
VolumeOne
VolumeThree
VolumeTwo
Watch
WebPage
WebPages
Workflow
WorkflowAdd
Wrench
ZoomIn
ZoomOut
Hide State items
State
Hide State items
Active
boolean
-
False
True
Disabled
boolean
-
False
True
Focused
boolean
-
False
True
Hovered
boolean
-
False
True
Interaction testing
Interaction tests allow you to verify the functional aspects of UIs. Write a play function for your story and you'll see it run here.
Watch 8m video
Read docs