Skip to main content

EmptyState

    Use the EmptyState to communicate that no data is available for a section or view and guide users toward resolving the situation with a clear title, description, and actions.

    OverviewPropertiesUsageChangelog

    Import​

    import { EmptyState } from '@dynatrace/strato-components/content';

    Demo​

    Visual presets​

    Use the VisualPreset slot within the Visual slot in order to use predefined illustrations. Different combinations are possible based on the context and type props.

    Size​

    Use the optional size prop, which has a default value, to provide a suitable variation for your use case. When you set size to large, the layout is responsive based on the width of its parent container. Alternatively, set size to auto to adapt the size itself to the width of the parent container.

    Small​

    Default​

    Large​

    With size="large", the visual is placed next to the content. When the parent container is narrower than 704 px, the visual is stacked above the content instead.

    Auto​

    With size="auto", the empty state adapts its size to the width of its parent container.

    Parent widthSize
    Less than 700 pxsmall
    700–999 pxdefault
    1,000 px or morelarge

    The heading level of the title follows the resulting size, so it changes when the parent container is resized. To keep a fixed heading level, set as on EmptyState.Title.

    Still have questions?
    Find answers in the Dynatrace Community