Inset
Adds space around its children.
The <Inset> component is a layout component that acts as a container which adds spacing around its children.
Usage
The component should be used whenever you need to add some whitespace around elements. For example, around a <Form> or inside a <Card>.
Equal spacing
In order to add equal spacing to all sides use the space property like shown below. You can see that the rectangle has a distance of 2rem to the parent div.
Preview
Code
Horizontal and vertical spacing
A common use case is to give children of a content component some space, you can do this for example with wrapping an <Inset> around the card content like shown below.
To set only horizontal or vertical spacing, or to define different values for each, use the spaceX property for horizontal spacing and the spaceY property for vertical spacing.
Preview
Code
Main Street Park Amphitheater
Laughville | Outdoor Venue
An open-air amphitheater in the town park with lawn seating and a covered stage, ideal for community performances and summer comedy nights.
Props
Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!
aria-describedby?string;
Identifies the element (or elements) that describes the object.
aria-details?string;
Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-label?string;
Defines a string value that labels the current element.
aria-labelledby?string;
Identifies the element (or elements) that labels the current element.
aria-live?"off" | "polite" | "assertive";
Indicates the level of importance for updates in the live region.
- 'off': Updates are not announced unless focused.
- 'polite': Updates are announced when the user is idle.
- 'assertive': Updates are announced immediately, interrupting other announcements.
childrenReactNode;
The children of the component
id?string;
The element's unique identifier. See MDN.
role?"region" | (string & {});
Identifies the element a significant section of content for easier navigation.
When
region is used as a role, an aria-label or aria-labelledby must be provided.
See MDN.space?PaddingSpaceProp;
The space between the children. You can see allowed tokens here.
spaceX?PaddingSpacePropX;
Horizontal alignment for the children. You can see allowed tokens here.
spaceY?PaddingSpacePropY;
Vertical alignment for the children. You can see allowed tokens here.
Related
Last update: 4 months ago