EmptyState

Structure

The EmptyState component uses the native HTML <div>, <h3>, and <p> for the container, title, and description respectively by default. Pluma Buttons placed within the actions area are built with the native <button> element.

The EmptyState itself has no ARIA attributes, roles, or keyboard handlers. Accessibility for interactive children, such as buttons and links, is handled by those individual components.

Heading level

Be mindful of page hierarchy when building with the EmptyState. Its title defaults to the <h3> element. If the EmptyState is the only content on the page, consider if the heading level is appropriate or should be changed with the as prop.

Proper heading level structure is important for accessibility and navigation using assistive technology.

Icon accessibility

The icon rendered with the title is considered a decorative graphic and is hidden from the accessibility tree by default. Be sure not to use the icon as the sole representation of the EmptyState. Always pair it with a descriptive title.

Keyboard

Button/Link

table

Key	Function
Enter/Space	Simulates a click and activates the button.
Enter	Simulates a click and activates the link.
Shift+Tab	Moves focus to the previous focusable element.
Tab	Moves focus to the next focusable element.