Skip to main content
XD@JW
XD@JW
  • Principles
    • Experience
    • Design system
  • Patterns
    • Buttons and links
    • Empty states
    • Form validation
    • Loading states
    • Tables vs. lists
    • Tabs and friends
  • Components
    • Avatar
    • Badge
    • Button
    • Checkbox
    • Chip
    • Date inputs
    • Divider
    • File input
    • Input label
    • Input message
    • Menu
    • Multi-select
    • Notice
    • Page header
    • Radio button
    • Select box
    • Skeletons
    • Spinner
    • Stepper
    • Table
    • Text box
    • Textarea
    • Toggle switch
    • Tooltip
  • Design tokens
    • Space
    • Color
    • Typography
    • Shadows
  • Imagery
    • System icons
    • Display icons
  • Home

Components

Avatar
Show a person in the system, with their photo or initials.
Badge
Some say we don't need no stinking badges. They're wrong.
Button
Button, button, who's got the button?
Checkbox
Check, please!
Chip
Not as yummy as they sound. Still useful though.
Date inputs
Different ways to ask someone for a month, day, and year (not necessarily in that order).
Divider
You gotta draw the line somewhere.
File input
Drop a file or two in the box.
Input label
Make sure people understand what they're being asked for.
Input message
Give people guidance on how to fill in a form field, or respond to their input.
Menu
Expose a list of actions or destinations.
Multi-select
Choose one or more, and hide the options when you're not choosing.
Notice
Some content just wants to be noticed.
Page header
Set the stage for what to expect on this page.
Radio button
Choose one, and only one.
Select box
Choose one, and hide the choices when you're not choosing.
Skeletons
Show a placeholder text or images while content is loading.
Spinner
Generic loading state.
Stepper
Tell someone where they've been, where they are, and where they can go.
Table
Put two-dimensional data in rows and columns.
Text box
Get a few words from people.
Textarea
Get a lot of words from people.
Toggle switch
On. Off. On. Off.
Tooltip
We all need a little helping hand sometimes.