No results

When an interface needs to list items you should provide a helpful fallback message for when no results are found. If the user has the relevant permissions to create or add one of these items, you should provide a call to action to help them along their way.

No result messages have subtle, unique styling to differentiate them from regular content.

Basic message

A generic component to use wherever suitable, can be used within an empty tab if no content is available but the tab still needs to be displayed for navigation purposes.

<div class="no-results">
    <div class="no-results__message">    
        <p>There are currently no {things} to display</p>
    </div>
    <a href="#" class="btn btn--primary no-results__action">Create {Thing}</a>
</div>

See the Pen docs - no results - div by Paul Stanton (@stanton) on CodePen.

Empty tables

You should still display the column titles in the table header, this helps to inform the user about what kind of data is normally present in the table.

Use the following markup inside your <table>:

<tbody>
    <tr>
        <td class="no-results" colspan="99">
            <div class="no-results__message">
                <p>There are currently no {things} to display</p>
            </div>
            <a href="#" class="btn btn--primary no-results__action">Create {Thing}</a>
        </td>
    </tr>
</tbody>

See the Pen docs - table - no results by Paul Stanton (@stanton) on CodePen.