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
Giggle Grounds
Laughville | Outdoor Venue
A charming open-air venue perfect for comedy shows under the stars, bringing laughter to every corner of Laughville.
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.
children
ReactNode;
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: 2 months ago