Icons in the Vanilla framework fit within a 1rem square. When placing icons in a table, it should be clear which value the icons are associated with. To achieve that, the space between icon and its associated text should be less than the space between an icon and an unrelated value. In the screen below, this is achieved by fixing the space between value and associated icon at .5rem, and ensuring at least 1rem of space between text in adjacent columns. Resizing increases the latter distance, but has no effect on the former.
In the following example:
- Icons for the “Status” column stay at a fixed distance (.5rem) from the status text. Lack of an icon (as in the third row) does not disrupt the alignment of text in the status column. Resizing the table does not affect the spacing between status icon and status text.
- Preferably, icon position follows alignment - this is to ensure the icons are aligned as well.
There are cases when this rule can be disregarded. For example, keeping icons in separate columns would result in gaps that make it unclear which value the 3rd row edit icon is associated with.
The following image shows a “Don’t”: Avoid causing gaps when some icons might not be present in all cells.
Instead, either icon can be moved on the ragged edge side of the text.
Actionable icons (icons within buttons)
Actionable icons are icons you can interact with.
Interactions require affordances in line with Vanilla button styles:
- hit area (like .p-button—base), in other words padding around the icon,
with background in some or all states
- optionally, a border (like .p-button)
The overall icon button needs to also:
-
fit within the table row height without increasing it
-
be square (identical height and width)
-
appear consistently spaced with regards to other elements, both for buttons with invisible hit area, and ones with a border / background
Note: Current Vanilla buttons with the .has-icon class do not satisfy these requirements. They stretch rows and are not fully square, because they use the same classes as buttons with icon and text, which creates further complications. What follows is a proposal for a new kind of icon button that is optimised for confined spaces like tables.
