Skip to main content
MybringDesign System

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. And the cells also need their own class mb-table__cell--btn-link 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 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="mb-table__cell--btn-link 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="mb-table__cell--btn-link 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="mb-table__cell--btn-link 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 need their own class mb-table__cell--icon or mb-table__cell--iconm depending on the icon size. This is to prevent the table row height from increasing. Remember to use the title attribute for the icon for accessibility. This is one of the few instances where centering is recommended.

Reference

Shipment Recipient Sent Icons
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="mb-table__cell--icon 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="mb-table__cell--icon 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="mb-table__cell--iconm 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>