logo
U
N
I
F
Y
I
N
G
 
D
E
S
I
G
N
 
A
C
R
O
S
S
 
T
E
S
Guidelines
  • Design principles
  • Button alignment
  • Form Validation
  • Left Nav Column
  • Date & Time format
  • Use of undo
  • Item and facet counts
  • White background
Core
  • Borders
  • Colors
  • Flex
  • Icons
  • Layout
  • Spacing
  • Typography
  • Visibility
Elements
  • Autocomplete
  • Badge
  • Button
  • Checkbox / radio
  • Click stars
  • Datalist group
  • Error
  • Fieldset
  • Form control row
  • Form control column
  • Form group
  • Help
  • Input
  • Input group
  • Label
  • Loading
  • Notification Badge
  • Pill
  • Popover
  • Profile avatar
  • Rating
  • Select
  • Select Group
  • Simple date
  • Select date
  • Tabs
  • Textarea
  • Textarea group
  • Toggle
Components
  • BreadcrumbTrail
  • Collapsible
  • Container
  • Feedback Capture
  • Filter
  • Mobile Browse
  • Modal
  • Modal Error
  • Multiselect
  • Notification
  • Pagination
  • Panel
  • Profile card
  • Radio group
  • Ride
  • Smart nav
  • Uploader

Guidelines

Button alignment

All forms take bottom left buttons, all dialogues are right, and all overlays middle.

This is because making all buttons on Tes ranged on one or other side all the time (in the name of consistency) will be too restrictive in some cases.

Note that on mobile: we prefer all action buttons to be one the right (and their secondary/cancel items to their left)

Copyright @ Tes 2020   |    v. 1.0.0 - Repository