"})," tag"]}),` `]}),` `,(0,n.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,n.jsxs)(e.p,{children:["Think of ",(0,n.jsx)(e.code,{children:"Wrap"})," component as a flex box container with ",(0,n.jsx)(e.code,{children:"flex-wrap"})," and ",(0,n.jsx)(e.code,{children:"spacing"}),` support. It works really well with things like dialog buttons, tags, and chips.`]}),` `,(0,n.jsxs)(e.p,{children:["In the example below, you see that the last ",(0,n.jsx)(e.code,{children:"Box"})," wrapped to the next line."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` Box 1 Box 2 Box 3 Box 4 `})}),` `,(0,n.jsx)(e.h3,{id:"change-the-spacing",children:"Change the spacing"}),` `,(0,n.jsxs)(e.p,{children:["Pass the ",(0,n.jsx)(e.code,{children:"spacing"}),` prop to apply consistent spacing between each child, even if it wraps.`]}),` `,(0,n.jsxs)(e.blockquote,{children:[` `,(0,n.jsx)(e.p,{children:"Pro Tip: You can pass responsive values for the spacing."}),` `]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` Box 1 Box 2 Box 3 Box 4 Box 5 `})}),` `,(0,n.jsx)(e.h3,{id:"change-the-alignment",children:"Change the alignment"}),` `,(0,n.jsxs)(e.p,{children:["Pass the ",(0,n.jsx)(e.code,{children:"align"})," prop to change the alignment of the child along the cross axis."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` Box 1 Box 2 Box 3 Box 4 Box 5 `})}),` `,(0,n.jsxs)(e.p,{children:["Pass the ",(0,n.jsx)(e.code,{children:"justify"}),` prop to change the alignment of the child along the main axis.`]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` Box 1 Box 2 Box 3 Box 4 Box 5 `})})]})}function w(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(i,r)})):i(r)}var B=w;return u(f);})(); ;return Component;

Wrap

Props#

Wrap Props#

WrapItem Props#

Props#

Wrap Props#

WrapItem Props#