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
Option 2: Link button with 4px padding
Option 3: Link buttion with 0px padding
#
Option 1: Use default link buttonsFor
- 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 buttonsFor
- 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 buttonsFor
- 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.
#
DecisionOption 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.