Row Buttons
A pattern that has come up a lot in the past is full-width buttons. Currently, the appearance of these buttons across apps is inconsistent.
Current Patterns
Destructive Background | Bold Destructive Text |
---|---|
Destructive Text | Arrow Icon |
---|---|
Icon and Ellipsis | Bold (Destructive) Text With Arrow Icon |
---|---|
Considerations
A concern that came up is how we should communicate the activatability of these buttons, but bold centered text seems to properly indicate that they are clickable.
Another question is that of the suggested/destructive styling. Changing the background colors seems to make them too heavy, whereas changing the text/icon color is more subtle. This might also allow for multiple suggestive/destructive actions in a place like settings-mockups!9 (merged).
There are two types of icons that could be used for row buttons. An arrow at the end of the label to indicate further action, and an icon at the start to make it more glanceable like here.
There are two prominent layout patterns. One being a row button at the bottom of a list, used to add more items. Another one being a boxed list with a single row button.