Skip to content

Empty State

Empty states are used to indicate that there is no data available for display. They often include a message, an illustration, and sometimes a call to action to guide users on what to do next.

No Data Available

There is no data available at the moment.

Loading Code Block...

To get started, install Butterfly DS via aqua:

Loading Code Block...
Loading Code Block...
sm

No Data Available

There is no data available at the moment.

Loading Code Block...

PropsDefaultTypeDescription
title-stringThe title of the empty state.
description-stringA brief description of the empty state.
sizesmsm | md | lg | xlSize of the empty state component.
icon
icon icon icon icon