Flex
A primitive component that can be used to build flexbox based elements and layouts.
yarn add @twilio-paste/flex - or - yarn add @twilio-paste/core
import {Flex} from '@twilio-paste/core/flex';
const Component = () => <Flex>Foo</Flex>;
as
- Type
keyof IntrinsicElements- Default
'div'
basis
- Type
| string | number | (BasisOptions | null)[] | { [x: string]: BasisOptions | undefined [x: number]: BasisOptions | undefined }
display
Responsive style prop for the CSS display property
- Type
| "flex" | "inline-flex" | (DisplayOptions | null)[] | { [x: string]: DisplayOptions | undefined [x: number]: DisplayOptions | undefined }- Default
'flex'
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
string- Default
'FLEX'
grow
- Type
| number | boolean | (GrowOptions | null)[] | { [x: string]: GrowOptions | undefined [x: number]: GrowOptions | undefined }
hAlignContent
- Type
| "center" | "right" | "left" | "around" | "between" | (HorizontalAlignOptions | null)[] | { [x: string]: HorizontalAlignOptions | undefined [x: number]: HorizontalAlignOptions | undefined }
height
Responsive style prop of Size Tokens for for the CSS height property
- Type
| string | number | (string & {}) | (HeightOptions | null)[] | { [x: string]: HeightOptions; [x: number]: HeightOptions }
margin
Responsive prop of Space tokens for the CSS margin property
- Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }
marginBottom
Responsive prop of Space tokens for the CSS margin-bottom property
- Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }
marginLeft
Responsive prop of Space tokens for the CSS margin-left property
- Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }
marginRight
Responsive prop of Space tokens for the CSS margin-right property
- Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }
marginTop
Responsive prop of Space tokens for the CSS margin-top property
- Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }
marginX
Responsive prop of Space tokens for the CSS margin-left and margin-right properties
- Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }
marginY
Responsive prop of Space tokens for the CSS margin-top and margin-bottom properties
- Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }
maxHeight
Responsive style prop of Size Tokens for for the CSS max-height property
- Type
| string | number | (string & {}) | (MaxHeightOptions | null)[] | { [x: string]: MaxHeightOptions; [x: number]: MaxHeightOptions }
maxWidth
Responsive style prop of Size Tokens for for the CSS max-width property
- Type
| string | number | (string & {}) | (MaxWidthOptions | null)[] | { [x: string]: MaxWidthOptions; [x: number]: MaxWidthOptions }
minHeight
Responsive style prop of Size Tokens for for the CSS min-height property
- Type
| string | number | (string & {}) | (MinHeightOptions | null)[] | { [x: string]: MinHeightOptions; [x: number]: MinHeightOptions }
minWidth
Responsive style prop of Size Tokens for for the CSS min-width property
- Type
| string | number | (string & {}) | (MinWidthOptions | null)[] | { [x: string]: MinWidthOptions; [x: number]: MinWidthOptions }
overflow
- Type
| Overflow | (Overflow | null | undefined)[] | { [x: string]: Overflow | undefined; [x: number]: Overflow | undefined }
overflowX
- Type
| OverflowX | (OverflowX | null | undefined)[] | { [x: string]: OverflowX | undefined; [x: number]: OverflowX | undefined }
overflowY
- Type
| OverflowY | (OverflowY | null | undefined)[] | { [x: string]: OverflowY | undefined; [x: number]: OverflowY | undefined }
padding
Responsive prop of Space tokens for the CSS padding property
- Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }
paddingBottom
Responsive prop of Space tokens for the CSS padding-bottom property
- Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }
paddingLeft
Responsive prop of Space tokens for the CSS padding-left property
- Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }
paddingRight
Responsive prop of Space tokens for the CSS padding-right property
- Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }
paddingTop
Responsive prop of Space tokens for the CSS padding-top property
- Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }
paddingX
Responsive prop of Space tokens for the CSS padding-left and padding-right properties
- Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }
paddingY
Responsive prop of Space tokens for the CSS padding-top and padding-bottom properties
- Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }
shrink
- Type
| number | boolean | (ShrinkOptions | null)[] | { [x: string]: ShrinkOptions | undefined [x: number]: ShrinkOptions | undefined }
size
Responsive style prop of Size Tokens for for the CSS width and height properties
- Type
string | number | (string & {}) | (WidthOptions | null)[] | { [x: string]: WidthOptions; [x: number]: WidthOptions; } | (HeightOptions | null)[] | { ...; }
vAlignContent
- Type
| "center" | "top" | "bottom" | "stretch" | (VerticalAlignOptions | null)[] | { [x: string]: VerticalAlignOptions | undefined [x: number]: VerticalAlignOptions | undefined }
vertical
- Type
| boolean | (boolean | null)[] | { [x: string]: boolean | undefined; [x: number]: boolean | undefined }
width
Responsive style prop of Size Tokens for the CSS width property
- Type
| string | number | (string & {}) | (WidthOptions | null)[] | { [x: string]: WidthOptions; [x: number]: WidthOptions }
wrap
- Type
| boolean | (boolean | null)[] | { [x: string]: boolean | undefined; [x: number]: boolean | undefined }
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.