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. 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. Use vis-hide if it is not relevant for screen readers, and use screen-reader-text if title would be helpful for screen readers.

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 scope="col">Shipment</th>
    <th scope="col">Recipient</th>
    <th scope="col">Sent</th>
    <th scope="col" class="screen-reader-text">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

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 scope="col">Shipment</th>
    <th scope="col">Recipient</th>
    <th scope="col">Sent</th>
    <th scope="col">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>