v1.0.10

Inline

Installation

Install yarn add @spark-web/inline
Source GitHub.com
Bundle unpkg.com

Use to layout a group of elements together, and allow them to wrap onto multiple lines.

Examples

Gap

The spacing between children can be adjusted using the gap prop.

Vertical alignment

Items can be aligned vertically using the alignY prop.

top
center
bottom

Horizontal alignment

Items can be aligned horizontally using the align prop.

left
center
right

Props

PropTypeDescription

align?

ResponsiveProp<"right" | "left" | "center">

Horizontally align items within the container.

alignSelf?

ResponsiveProp<"start" | "center" | "end" | "stretch">

Overrides the parent's `align-items` value. Controls the alignment of

item's on the cross axis.

alignY?

ResponsiveProp<"top" | "bottom" | "center">

Vertically align items within the container.

background?

"body" | "input" | "infoLight" | "criticalLight" | "positiveLight" | "cautionLight" | "muted" | "disabled" | "backdrop" | "surface" | "surfaceMuted" | "surfacePressed" | "fieldAccent" | ... 23 more ... | "positiveMuted"

The `background` property sets the background color of an element.

border?

ResponsiveProp<"fieldAccent" | "accent" | "accentMuted" | "neutral" | "primary" | "secondary" | "caution" | "cautionMuted" | "critical" | "criticalMuted" | "info" | "infoMuted" | "positive" | ... 9 more ... | "secondaryActive">

The `border` property sets the color of an element's border.

borderBottom?

ResponsiveProp<"fieldAccent" | "accent" | "accentMuted" | "neutral" | "primary" | "secondary" | "caution" | "cautionMuted" | "critical" | "criticalMuted" | "info" | "infoMuted" | "positive" | ... 9 more ... | "secondaryActive">

The `border` property sets the color of an element's border on the bottom side.

borderLeft?

ResponsiveProp<"fieldAccent" | "accent" | "accentMuted" | "neutral" | "primary" | "secondary" | "caution" | "cautionMuted" | "critical" | "criticalMuted" | "info" | "infoMuted" | "positive" | ... 9 more ... | "secondaryActive">

The `border` property sets the color of an element's border on the left side.

borderRadius?

ResponsiveProp<"small" | "medium" | "large" | "full">

The `borderRadius` property rounds the corners of an element's outer

border edge.

borderRight?

ResponsiveProp<"fieldAccent" | "accent" | "accentMuted" | "neutral" | "primary" | "secondary" | "caution" | "cautionMuted" | "critical" | "criticalMuted" | "info" | "infoMuted" | "positive" | ... 9 more ... | "secondaryActive">

The `border` property sets the color of an element's border on the right side.

borderTop?

ResponsiveProp<"fieldAccent" | "accent" | "accentMuted" | "neutral" | "primary" | "secondary" | "caution" | "cautionMuted" | "critical" | "criticalMuted" | "info" | "infoMuted" | "positive" | ... 9 more ... | "secondaryActive">

The `border` property sets the color of an element's border on the top side.

borderWidth?

ResponsiveProp<"large" | "standard">

The `borderWidth` property sets the width of an element's border.

bottom?

ResponsiveProp<0>: 0 | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", 0>>

The `bottom` property participates in setting the vertical position of a

positioned element. It has no effect on non-positioned elements.

children?

ReactNode: string | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal

Children element to be rendered inside the component.

className?

string

Custom css styles.

cursor?

"default" | "pointer"

The `cursor` property sets the type of mouse cursor, if any, to show when

the mouse pointer is over an element.

data?

DataAttributeMap

Sets data attributes on the component.

flex?

ResponsiveProp<0 | 1>

The `flex` shorthand property sets how a flex item will grow or shrink to

fit the space available in its flex container.

flexGrow?

ResponsiveProp<0 | 1>

The `flexGrow` property sets the flex grow factor of a flex item main size.

flexShrink?

ResponsiveProp<0 | 1>

The `flexShrink` property sets the flex shrink factor of a flex item. If

the size of all flex items is larger than the flex container, items shrink

to fit according to `flex-shrink`.

gap?

ResponsiveProp<"small" | "medium" | "large" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">

The size of the gap between each child element.

height?

ResponsiveSizing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "full" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "full">>

Sets the element's height.

id?

string

An identifier which must be unique in the whole document.

left?

ResponsiveProp<0>: 0 | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", 0>>

The `left` property participates in specifying the horizontal position of a

positioned element. It has no effect on non-positioned elements.

margin?

ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">>

The `margin` shorthand property sets the margin area on all four sides of

an element at once.

marginBottom?

ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">>

The `marginBottom` property sets the margin area on the bottom side of an

element.

marginLeft?

ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">>

The `marginLeft` property sets the margin area on the left side of an

element.

marginRight?

ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">>

The `marginRight` property sets the margin area on the right side of an

element.

marginTop?

ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">>

The `marginTop` property sets the margin area on the top side of an

element.

marginX?

ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">>

The `marginY` shorthand property sets the margin area on the left and

right of the element.

marginY?

ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">>

The `marginY` shorthand property sets the margin area on the top and

bottom of the element.

minHeight?

0

The `minHeight` property sets the minimum height of an element. It prevents

the used value of the height property from becoming smaller than the value

specified for `minHeight`.

minWidth?

0

The `minWidth` property sets the minimum width of an element. It prevents

the used value of the width property from becoming smaller than the value

specified for `minWidth`.

opacity?

ResponsiveProp<number>: number | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", number>>

Sets the opacity of the element. Opacity is the degree to which content

behind an element is hidden, and is the opposite of transparency.

overflow?

"hidden" | "scroll" | "visible" | "auto"

The `overflow` shorthand property sets the desired behavior for an

element's overflow — i.e. when an element's content is too big to fit in

its block formatting context — in both directions.

padding?

ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">>

The `padding` shorthand property sets the padding area on all four sides

of an element at once.

paddingBottom?

ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">>

The `paddingBottom` property sets the height of the padding area on the

bottom of an element.

paddingLeft?

ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">>

The `paddingLeft` property sets the width of the padding area on the left

of an element.

paddingRight?

ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">>

The `paddingRight` property sets the width of the padding area on the

right of an element.

paddingTop?

ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">>

The `paddingTop` property sets the height of the padding area on the top

of an element.

paddingX?

ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">>

The `paddingX` shorthand property sets the padding area on the left and

right of the element.

paddingY?

ResponsiveSpacing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge">>

The `paddingY` shorthand property sets the padding area on the top and

bottom of the element.

position?

ResponsiveProp<"absolute" | "fixed" | "relative" | "sticky">

The `position` property sets how an element is positioned in a document.

The `top`, `right`, `bottom`, and `left` properties determine the final

location of positioned elements.

right?

ResponsiveProp<0>: 0 | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", 0>>

The `right` property participates in specifying the horizontal position of

a positioned element. It has no effect on non-positioned elements.

shadow?

"small" | "medium" | "large"

The `boxShadow` property adds shadow effects around an element's frame.

top?

ResponsiveProp<0>: 0 | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", 0>>

The `top` property participates in specifying the vertical position of a

positioned element. It has no effect on non-positioned elements.

userSelect?

"none"

The `userSelect` property controls whether the user can select text.

width?

ResponsiveSizing: "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "full" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "medium" | "large" | "none" | "xxsmall" | "xsmall" | "full">>

Sets the element's width.

zIndex?

ResponsiveProp<"sticky" | "dropdownBlanket" | "dropdown" | "modalBlanket" | "modal" | "notification">

The `zIndex` property sets the "z-order" of a positioned element and its

descendants or flex items. Overlapping elements with a larger z-index cover

those with a smaller one.

Box props are also included as Inline props and are not listed here (excluding display, alignItems, flexDirection, justifyContent and flexWrap).

© 2023 Brighte Capital Pty Ltd