Row

Arranges children in a horizontal line, from left to right.

Prop	Type	Description
children	React.Node	Accpets children to render
gap?	number	Gap size in rems
justifyContent?	"flex-end" \| "space-between" \| "space-around"	Allows to set CSS justify-content property
align?	"start" \| "end"	CSS flexbox align-items property
className?	string	Sets class attribute
onClick?	() => void	Sets onClick method
title?	string	Sets title attribute

import { Row } from "@brick-uikit/layout";

Usage row

By default if you use Row, child elements will position with space between them

Here is how you would use Row component

example.tsx

<Row>
	<h4>Title</h4>
	<p>Here is how you would use Row component</p>
</Row>

You can use the gap property, and the row component will position the elements on gap width you give it. The gap number is set in rems

Here is how you would use Row component

example.tsx

<Row gap={1}>
	<h4>Title</h4>
	<p>Here is how you would use Row component</p>
</Row>