Buttons
Variants
Primary
Secondary
Destructive
Modeless
Outline modifier
Primary Outline
Secondary Outline
Destructive Outline
Icon only
Primary icon
Secondary icon
With label icon
States
Disabled
Inputs
Direct input
Default
Default (filled)
Large
No fill
Error
Disabled
Wrapper (icon + clear)
Search
Left + Right icon
Split input
XYWH
Opacity
%
Controls
Segmented Control
3 segments
2 segments
Checkbox
Unchecked
Checked
Disabled
Radio
Unselected
Selected
Disabled
Slider
Default (25%)
Default (75%)
Progress
33%
80%
Loader
Default (16px)
Large (24px)
Dropdown
Closed
Open
Rows
Default Row
Normal
Option label
With right chevron
Destructive
Disabled
Thumbnail Row
Account Row
Tyler Reynolds
tyler@all-turtles.com
Menus
Default menu
Thumbnail menu
-
Scene A
-
Scene B
Account menu
Tyler Reynolds
tyler@all-turtles.com
Education
Coach Mark — Arrow positions
center-left
Create a new presentation or open an existing one
center-right
Select a template to get started
top-left / top-center / top-right
Top-left arrow example
Top-center arrow example
Top-right arrow example
bottom-left / bottom-center / bottom-right
Bottom-left arrow example
Bottom-center arrow example
Bottom-right arrow example
No arrow
Coach mark with no arrow
Tooltip — Arrow positions
No arrow
Helper text
left
Helper text
right
Helper text
top-left
Helper text
top-center
Helper text
top-right
Helper text
bottom-left
Helper text
bottom-center
Helper text
bottom-right
Helper text
Others
Badge
Numeric
3
Double digit
12
Dot
Divider
Horizontal
Above
Below
Vertical
Left
Right
Scrollbar
Weak (H)
Strong (H)
Weak (V)
Strong (V)
Color Picker
Default
100%
Swatches
Default
Custom Colors
Default
Opacity