dd008_Use small link button variation when left-aligning underneath other copy

Question: How can visually align link buttons that are left-aligned underneath other copy? In use cases where the link button is placed underneath other copy, the 16px left padding on the default link button creates a jarring indentation.

Additional context in github issue 757

List of options

  • Option 1: Use default link buttons (left & right padding 16px)
  • Option 2: Use small link buttons (left & right padding 4px)
  • Option 3: Use globally altered small link buttons (0px left & right padding)

Option 1: Link button with 16px padding

link button in page header

link button in card body

Option 2: Link button with 4px padding

link button in page header

link button in card body

Option 3: Link buttion with 0px padding

link button in page header

link button in card body

Option 1: Use default link buttons#

For

  • Same usage patterns and component implementation for all use cases of the link button. Meaning we don't have to document a separate usage pattern and component implementation for this use case.
  • Developers don't have to customize the component on a per use basis.

Against

  • Visually jarring; the misalignment caused by the 16px left padding draws attention.

Option 2: Use small link buttons#

For

  • The 4px left padding is not noticeable enough to be jarring.
  • 8px total left & right padding is a healthy enough amount of padding to have on all small link buttons to make them click friendly.
  • Developers don't have to customize the component on a per use basis.

Against

  • A different usage pattern and component implementation for this specific use case of the link button. Meaning we will have to document a separate usage pattern and component implementation for this use case. Developers and designers will need to remember to pick a different link button variation for this use case.
  • 8px total left & right padding may be too small to make the button click friendly on small screen sizes.

Option 3: Use globally altered small link buttons#

For

  • Complete visual alignment with the surrounding copy.
  • Developers don't have to customize the component on a per use basis.

Against

  • 0px total left & right padding runs the risk of having too little click space, especially when the copy of the button is too short to increase the width of the button.
  • A different usage pattern and component implementation for this specific use case of the link button.

Decision#

Option 2: We will use small link buttons with 4px left & right padding for use cases where the link button is placed underneath other copy.

This option offers a global component with the least amount of customization work by developers for the most amount of visual alignment. It also has a small enough padding to make the button click friendly.

Last updated on by Paulo Andrade