Icons and buttons

Adding icons, links and buttons without increasing row height

The icons in the examples use the regular JS implementation, but if you are writing a React application, package and instructions can be found via the icon documentation.

Buttons and links

Action buttons and links should use the btn-link hybrid classes. The cells will automatically adjust their paddings to prevent increasing the table row height. Multiple buttons can be placed in either one or multiple columns. If we have a lot of rows, repeating the word inside the buttons might become a bit crowded – and it makes more sense to just use the icons. In that case, we use the title attribute in the link or button. We always have to have a column header, though it can be visually hidden.

Reference

Shipment	Recipient	Sent	Edit or delete
987654321	Acme Industries	14.07.2016 12.56	Edit
123456789	Burgers and Beauty as	26.06.2016 14.12	Edit
456789123	Rent-A-Cat Co.	02.05.2016 11.38	Edit

<table class="mb-table">
<thead>
  <tr>
    <th>Shipment</th>
    <th>Recipient</th>
    <th>Sent</th>
    <th class="vis-hide">Edit or delete</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td><a href="#">987654321</a></td>
    <td>Acme Industries</td>
    <td>14.07.2016 12.56</td>
    <td class="flex">
      <a href="#" class="btn-link mrs" title="Edit">
        <span
          data-mybicon="mybicon-edit"
          data-mybicon-class="icon-ui mrxs"
        ></span>
        <span>Edit</span>
      </a>
      <button class="btn-link" title="Delete">
        <span
          data-mybicon="mybicon-trash"
          data-mybicon-class="icon-ui mrxs"
        ></span>
        <span>Delete</span>
      </button>
    </td>
  </tr>
  <tr>
    <td><a href="#">123456789</a></td>
    <td>Burgers and Beauty as</td>
    <td>26.06.2016 14.12</td>
    <td class="flex">
      <a href="#" class="btn-link mrs" title="Edit">
        <span
          data-mybicon="mybicon-edit"
          data-mybicon-class="icon-ui mrxs"
        ></span>
        <span>Edit</span>
      </a>
      <button class="btn-link" title="Delete">
        <span
          data-mybicon="mybicon-trash"
          data-mybicon-class="icon-ui mrxs"
        ></span>
        <span>Delete</span>
      </button>
    </td>
  </tr>
  <tr>
    <td><a href="#">456789123</a></td>
    <td>Rent-A-Cat Co.</td>
    <td>02.05.2016 11.38</td>
    <td class="flex">
      <a href="#" class="btn-link mrs" title="Edit">
        <span
          data-mybicon="mybicon-edit"
          data-mybicon-class="icon-ui mrxs"
        ></span>
        <span>Edit</span>
      </a>
      <button class="btn-link" title="Delete">
        <span
          data-mybicon="mybicon-trash"
          data-mybicon-class="icon-ui mrxs"
        ></span>
        <span>Delete</span>
      </button>
    </td>
  </tr>
</tbody>
</table>

Icons

Cells with icon content automatically adjusts their paddings to prevent increasing the table row height. Remember to use the title attribute for the icon for accessibility. This is one of the few instances where centering is recommended.

Reference

tc
Icon system for JS or React

Shipment	Recipient	Sent
987654321	Acme Industries	14.07.2016 12.56
123456789	Burgers and Beauty as	26.06.2016 14.12
456789123	Rent-A-Cat Co.	02.05.2016 11.38

<table class="mb-table">
<thead>
  <tr>
    <th>Shipment</th>
    <th>Recipient</th>
    <th>Sent</th>
    <th>Icons</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td><a href="#">987654321</a></td>
    <td>Acme Industries</td>
    <td>14.07.2016 12.56</td>
    <td class="tc">
      <span
        data-mybicon-title="Delivered"
        data-mybicon="mybicon-check"
        data-mybicon-class="icon-ui icon-ui--green"
      ></span>
    </td>
  </tr>
  <tr>
    <td><a href="#">123456789</a></td>
    <td>Burgers and Beauty as</td>
    <td>26.06.2016 14.12</td>
    <td class="tc">
      <span
        data-mybicon-title="Grey admin"
        data-mybicon="mybicon-user-crown"
        data-mybicon-class="icon-ui icon-ui--gray"
      ></span>
    </td>
  </tr>
  <tr>
    <td><a href="#">456789123</a></td>
    <td>Rent-A-Cat Co.</td>
    <td>02.05.2016 11.38</td>
    <td class="tc">
      <span
        data-mybicon-title="This is medium sized"
        data-mybicon="mybicon-info"
        data-mybicon-class="icon-ui icon-ui--m"
      ></span>
    </td>
  </tr>
</tbody>
</table>