PF Next

Empty State

Preview

Empty State

This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.

<div class="pf-c-empty-state">
  <i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
  <h1 class="pf-c-title pf-m-lg">
    Empty State
  </h1>
  <p class="pf-c-empty-state__body">
    This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.
  </p>
  <button class="pf-c-button pf-m-primary">
    Primary action
  </button>
  <div class="pf-c-empty-state__secondary">
    <button class="pf-c-button pf-m-link">
      Multiple
    </button>
    <button class="pf-c-button pf-m-link">
      Action Buttons
    </button>
    <button class="pf-c-button pf-m-link">
      Can
    </button>
    <button class="pf-c-button pf-m-link">
      Go here
    </button>
    <button class="pf-c-button pf-m-link">
      In the secondary
    </button>
    <button class="pf-c-button pf-m-link">
      Action area
    </button>
  </div>
</div>

Documentation

Accessibility

Attribute Applied To Outcome
aria-hidden="true" .pf-c-empty-state__icon Hides icon for assistive technologies. Required

Usage

Class Applied To Outcome
.pf-c-empty-state <div> Initiates an empty state component. Required
.pf-c-empty-state__icon <i> Creates the empty state icon.
.pf-c-title <h1>, <h2>, <h3>, <h4>, <h5>, <h6> Creates the empty state title. Required
.pf-c-empty-state__body <p> Creates the empty state body content.
.pf-c-button.pf-m-primary <button> Creates the primary action button.
.pf-c-empty-state__secondary <div> Creates area for secondary actions.