Digital Style Guide UNSW Digital Style Guide | Page 25

Buttons
Vertical positioning
Single line label
In some cases button text may be very
long. Maintain equal top and bottom
paddings and allow text to wrap. When
two buttons of different height are
displayed side by side, adjust the single
line button height to match the two line
button height.
Horizontal positioning
Single line label
Two line label that
expands the button
Two line label that
expands the button
Vertically centered icon
This is two line
label icon button
This is two line
label arrow button
Button length
By default, button length is defined by the length of the label. However, in some cases
button length may be adjusted to be the same when displayed next to each other.
E.g. use full width button length on mobile screens.
Default
UNSW Digital Style Guide
Alternative
Multiple words button text Multiple words button text
Short button text Short button text
Back to contents | 25