EmptyModule
@stellaria/nebula-webEmptyModulePropsPreview
Props
12| Prop | Type | Default |
|---|---|---|
action | ReactNode | — |
className | string | — |
description | ReactNode | — |
fill Takes the room its parent gives it — `flex: 1; align-self: stretch` — and centres the content inside. A state that stands in for what could not be painted should BE the screen, not a card floating at the top of an empty one. | boolean | false |
footer | ReactNode | — |
icon | ReactNode | — |
illustration | ReactNode | — |
layout `"side"` puts the illustration to the left of the text and the text starts flush against it; it stacks again below `tablet`. `"stack"` is the illustration over the text. | EmptyModuleLayout | "stack" |
secondaryAction | ReactNode | — |
size | "sm" | "md" | "lg" | "md" |
surface The pane behind it. `"glass"` is the product sheet of ADR-192: the same pane as a `Card variant="glass" glass="strong"` with its hairline and `lg` corners, which is what a state that stands in for a whole screen wants. | EmptyModuleSurface | "dashed" |
title required | ReactNode | — |
Slot props
6Each one spreads over an inner element, so you can restyle a region without forking the component.
| Prop | Type | Default |
|---|---|---|
actionsProps The band that joins `action` and `secondaryAction`. It lands INSIDE the `EmptyState` action row, it does not replace it, and it does not exist without at least one of the two. | BoxSlotProps | — |
descriptionProps The description, forwarded to the `EmptyState`. Only rendered with `description`. | TextSlotProps | — |
footerProps The module footer, outside the `EmptyState`. Only rendered with `footer`. | BoxSlotProps | — |
iconProps The glyph, forwarded to the `EmptyState`. Only rendered with `icon`. | BoxSlotProps | — |
illustrationProps The illustration, which belongs to the module and goes before the `EmptyState`. Only with `illustration`; it is `aria-hidden` and its size comes from `size`. | BoxSlotProps | — |
titleProps The title, forwarded to the slot of the `EmptyState` the module mounts inside. | TextSlotProps | — |
Also accepts
On top of its own props, this component forwards these groups.