Container

⚠️

This component will become deprecated in future version of Wysteria. Please use the div element instead.

The Container component provides a simplified interface for managing layout using CSS flex properties.

API

Prop	Type	Default	Description
`onClick`	callback		Called when container is clicked
`direction`	`row` `column` `row-reverse` `column-reverse`	`row`	The primary axis to use when laying out children elements. Corresponds to the css property `flex-direction` (opens in a new tab)
`justify`	`center` `start` `end` `flex-start` `flex-end` `left` `right`	`left`	How to space children elements on the primary axis. Corresponds to the css property `justify-content` (opens in a new tab)
`align`	`center` `start` `end` `flex-start` `flex-end` `self-start` `self-end`	`start`	How to space children elements on the secondary axis. Corresponds to the css property `align-items` (opens in a new tab)
`gap`	`none` `xs` `sm` `md` `lg` `xl` `xxl` `xxxl`	`md`	Spacing between each child element inside the container
`padding`	`none` `xs` `sm` `md` `lg` `xl` `xxl` `xxxl`	`md`	Padding between button border and content, and between button text and icons
`paddingHor`	`none` `xs` `sm` `md` `lg` `xl` `xxl` `xxxl`	`md`	Padding on left and right
`paddingVer`	`none` `xs` `sm` `md` `lg` `xl` `xxl` `xxxl`	`md`	Padding on top and bottom
`paddingTop`	`none` `xs` `sm` `md` `lg` `xl` `xxl` `xxxl`	`md`	Padding on top
`paddingRgt`	`none` `xs` `sm` `md` `lg` `xl` `xxl` `xxxl`	`md`	Padding on right
`paddingBot`	`none` `xs` `sm` `md` `lg` `xl` `xxl` `xxxl`	`md`	Padding on bottom
`paddingLft`	`none` `xs` `sm` `md` `lg` `xl` `xxl` `xxxl`	`md`	Padding on left
`children`	String		The label of the button. If empty, button assumes a square aspect ratio (icon-only)
`style`	Object		Custom css styles that are applied to the container. Uses React inline styling (opens in a new tab)