Developer mode
Opens components on the React tab by default.
Your bookmarks

Inline / React

Adds spacing among inline components.

To implement Inline component into your project you’ll need to add the import:

import Inline from "@kiwicom/orbit-components/lib/Inline";

After adding import into your project you can use it simply like:

<Inline>Hello World!</Inline>

Props

Table below contains all types of the props available in the Inline component.

Name Type Default Description
as string "div" Render as element.
className string "div" Optional className of component.
children React.Node The children of the Inline.
dataTest string Optional prop for testing purposes.
spacing spacingToken The spacing between children elements of the Inline
align enum The align-items of the Inline
justify enum The justify-content of the Inline
largeDesktop MediaQueries Object for setting up properties for the largeDesktop viewport.
desktop MediaQueries Object for setting up properties for the desktop viewport.
tablet MediaQueries Object for setting up properties for the tablet viewport.
largeMobile MediaQueries Object for setting up properties for the largeMobile viewport.
mediumMobile MediaQueries Object for setting up properties for the mediumMobile viewport.

Media Queries

When you need to specify some different behaviour of the Inline component on different viewport, you can use properties for it. There are mediumMobile, largeMobile, tablet, desktop and largeDesktop available and it behaves the same as mediaQueries functions. All this properties – objects have the some own properties and none is required.

Name Type Default Description
spacing spacingToken The spacing between children elements of the Inline
align enum The align-items of the Inline
justify enum The justify-content of the Inline

enum

justify align
"start" "start"
"end" "end"
"center" "center"
"between"
"around"

spacingToken

spacingToken
"none"
"XXXSmall"
"XXSmall"
"XSmall"
"small"
"medium"
"large"
"XLarge"
"XXLarge"
"XXXLarge"