When to use
In components
Not to worry! These are built-in to components like Lists, Selects and Menus.
In boxes
Dividers span the width of the box, aligning with internal padding.
Web
Padding: 24px top/bottom
Native app
Padding: 16px top/bottom
As table dividers
When not to use
Under page titles and section titles. Instead, use ample padding.
Text: dashes and separators
Stick to hyphen, em dash and dots when keeping 2 elements separate but joined. Avoid en dashes and vertical lines.
- 1 hyphen: Use a single hyphen ( “-” ) to join times and dates.
- Add spaces before and after for long form, and no spaces for short form—view Date, time, duration guidelines.
- Example (long form): 9:00 am - 5:00 pm --> spaces
- Example (short form): 9am-5:30pm --> no spaces
- 2 hyphens: Use 2 hyphens to show that a cell is empty (no data) on a table.
- View empty states guidelines.
- Don’t add spaces before, after or in between.
- Em dash: Use em dashes ( “—”) to separate clauses within a sentence.
- Don’t add spaces before or after.
- Example: We want to keep you informed—not overwhelmed.
- Dot: Use a single dot ( “•” ) to separate items while still showing they’re closely related, such as phone and email in a team member’s profile.
- Add a space before and after the dot
- Dot available as Option + 8
- Slanted line: Use a slanted line ( “/”) to separate money values.
- Don’t add a space before or after
- Example: $24/hr