Nav Tabs
The NavTabs component represents the main navigation dock for an application on a mobile device, including up to 5 tabs or buttons for different sections. The component has a fixed position on the bottom of the screen.
import React from "react";
import { NavTabs } from "@nimbus-ds/patterns";
import { HomeIcon, MenuIcon, MoneyIcon, TagIcon } from "@nimbus-ds/icons";
const Example: React.FC = () => {
const handleClick = () => {
console.log("Tapped item");
};
return (
<NavTabs>
<NavTabs.Item
active
ariaLabel="Home"
icon={<HomeIcon size="medium" />}
onClick={handleClick}
/>
<NavTabs.Item
badge
ariaLabel="Money"
icon={<MoneyIcon size="medium" />}
onClick={handleClick}
/>
<NavTabs.Item
ariaLabel="Tag"
icon={<TagIcon size="medium" />}
onClick={handleClick}
/>
<NavTabs.Item
ariaLabel="Menu"
icon={<MenuIcon size="medium" />}
onClick={handleClick}
/>
</NavTabs>
);
};
export default Example;Instalá el componente via terminal.
npm install @nimbus-ds/nav-tabsAdditional props are passed to the <NavTabs> element. See div docs for a list of props accepted by the <NavTabs> element.
NavTabs
| Name | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | Content to be rendered inside the Nav element. |
NavTabs.Item
| Name | Type | Default | Description |
|---|---|---|---|
icon* | React.ReactNode | Icon element to be rendered inside the button. | |
active | boolean | Controls whether the button is active or not. | |
badge | boolean | Displays a small badge on top of the button. | |
onClick* | onClick: () => void; | Function executed on click. | |
ariaLabel* | string | Text label used for accessibility. | |
children | React.ReactNode | Element to be rendered inside the Box component. | |
width | string | The width property specifies the width of a box's content area. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
height | string | The height property specifies the height of a box's content area. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
maxWidth | string | The max width property specifies the width of a box's content area. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
maxHeight | string | The max height property specifies the height of a box's content area. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
minWidth | string | The min width property specifies the width of a box's content area. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
minHeight | string | The min height property specifies the height of a box's content area. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
bottom | string | The bottom property participates in setting the vertical position of a positioned box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
left | string | The left property participates in specifying the horizontal position of a positioned box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
right | string | The right property participates in specifying the horizontal position of a positioned box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
top | string | The top property participates in setting the vertical position of a positioned box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
flex | string | This is the shorthand for flexGrow, flexShrink and flexBasis combined. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
flexShrink | string | This defines the ability for a flex item to shrink if necessary. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
flexGrow | string | This defines the ability for a flex item to grow if necessary. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
flexWrap | 'nowrap' 'wrap' 'wrap-reverse' | The flexWrap property sets whether flex items are forced onto one line or can wrap onto multiple lines. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
order | string | The order property controls the order in which they appear in a flex container. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
gridTemplateColumns | string | The gridTemplateColumns property defines the line names and track sizing functions of the grid columns. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
gridTemplateAreas | string | The gridTemplateAreas property specifies named grid areas, establishing the cells in the grid and assigning them names. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
gridTemplateRows | string | The gridTemplateRows property defines the line names and track sizing functions of the grid rows. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
gridArea | string | The gridArea shorthand property specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
display | 'block' 'flex' 'grid' 'inline-flex' 'inline-grid' 'none' | The display property sets whether an box is treated as a block or inline element and the layout used for its children, such as grid or flex. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
justifyContent | 'center' 'flex-end' 'flex-start' 'space-around' 'space-between' 'space-evenly' | The justifyContent property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
flexDirection | 'column' 'column-reverse' 'row' 'row-reverse' | The flexDirection property sets how flex items are placed in the flex container defining the main axis and the direction. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
alignItems | 'baseline' 'center' 'flex-end' 'flex-start' 'stretch' | The alignItems property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
alignSelf | 'auto' 'baseline' 'center' 'flex-end' 'flex-start' 'stretch' | The alignSelf property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
gap | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none' | The gap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
gridGap | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none' | The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
pointerEvents | 'all' 'auto' 'fill' 'inherit' 'none' 'painted' 'stroke' 'visible' 'visibleFill' 'visiblePainted' 'visibleStroke' | The pointerEvents property sets under what circumstances (if any) a particular graphic element can become the target of pointer events. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
position | 'absolute' 'fixed' 'relative' 'static' 'sticky' | The position property sets how an box is positioned in a document. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
overflow | 'auto' 'hidden' 'scroll' 'visible' | The overflow shorthand property sets the desired behavior for an box's overflow. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
overflowX | 'auto' 'hidden' 'scroll' 'visible' | The overflow-x property sets what shows when content overflows a block-level box's left and right edges. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
overflowY | 'auto' 'hidden' 'scroll' 'visible' | The overflow-y property sets what shows when content overflows a block-level box's top and bottom edges. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
cursor | 'auto' 'grab' 'inherit' 'not-allowed' 'pointer' | The cursor property sets the mouse cursor, if any, to show when the mouse pointer is over an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
backgroundColor | 'danger-interactive' 'danger-surface' 'danger-surfaceHighlight' 'danger-textLow' 'neutral-background' 'neutral-interactive' 'neutral-surface' 'neutral-surfaceDisabled' 'neutral-surfaceHighlight' 'neutral-textLow' 'primary-interactive' 'primary-surface' 'primary-surfaceHighlight' 'primary-textLow' 'success-interactive' 'success-surface' 'success-surfaceHighlight' 'success-textLow' 'transparent' 'warning-interactive' 'warning-surface' 'warning-surfaceHighlight' 'warning-textLow' | 'neutral-background' | The backgroundColor property sets the background color of the box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' |
color | 'currentColor' 'danger-interactive' 'danger-surface' 'danger-surfaceHighlight' 'danger-textLow' 'neutral-background' 'neutral-interactive' 'neutral-surface' 'neutral-surfaceDisabled' 'neutral-surfaceHighlight' 'neutral-textLow' 'primary-interactive' 'primary-surface' 'primary-surfaceHighlight' 'primary-textLow' 'success-interactive' 'success-surface' 'success-surfaceHighlight' 'success-textLow' 'transparent' 'warning-interactive' 'warning-surface' 'warning-surfaceHighlight' 'warning-textLow' | The color property is used to set the color of the box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
borderRadius | '0-5' '1' '2' '3' '4' '5' '6' 'base' 'full' 'half' 'none' | The borderRadius property rounds the corners of an box's outer border edge. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
borderWidth | '1' '2' '3' '4' '5' 'none' | The borderWidth property sets the width of an box's border. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
borderTopWidth | '1' '2' '3' '4' '5' 'none' | The borderTopWidth property defines the width of the border at the top of a box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
borderBottomWidth | '1' '2' '3' '4' '5' 'none' | The borderBottomWidth property defines the width of the border at the bottom of a box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
borderLeftWidth | '1' '2' '3' '4' '5' 'none' | The borderLeftWidth property defines the width of the border at the left of a box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
borderRightWidth | '1' '2' '3' '4' '5' 'none' | The borderRightWidth property defines the width of the border at the right of a box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
borderWidthX | '1' '2' '3' '4' '5' 'none' | The borderWidthX shorthand property defines the width of the element's border on the left and right. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
borderWidthY | '1' '2' '3' '4' '5' 'none' | The borderWidthY shorthand property defines the width of the element's border on the top and bottom. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
borderColor | 'danger-interactive' 'danger-surface' 'danger-surfaceHighlight' 'neutral-interactive' 'neutral-surface' 'neutral-surfaceDisabled' 'neutral-surfaceHighlight' 'primary-interactive' 'primary-surface' 'primary-surfaceHighlight' 'success-interactive' 'success-surface' 'success-surfaceHighlight' 'transparent' 'warning-interactive' 'warning-surface' 'warning-surfaceHighlight' | The borderColor property sets the color of the box's four borders. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
borderStyle | 'dashed' 'dotted' 'hidden' 'none' 'solid' | borderStyle property sets the line style for all four sides of an box's border. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
boxSizing | 'border-box' 'content-box' | 'border-box' | The boxSizing property sets how the total width and height of an box is calculated. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' |
boxShadow | '0' '1' '2' '3' '4' '5' 'focusRing' | The boxShadow property adds shadow effects around an box's frame. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
padding | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none' | The padding properties are used to generate space around an box's content area. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
paddingTop | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none' | The paddingTop property sets the height of the padding area on the top of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
paddingBottom | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none' | The paddingBottom property sets the height of the padding area on the bottom of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
paddingLeft | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none' | The paddingLeft property sets the width of the padding area to the left of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
paddingRight | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none' | The paddingLeft property sets the width of the padding area to the right of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
margin | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none' | The margin shorthand property sets the margin area on all four sides of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
marginTop | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none' | The marginTop property sets the margin area on the top of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
marginBottom | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none' | The marginBottom property sets the margin area on the bottom of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
marginLeft | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none' | The marginLeft property sets the margin area on the left side of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
marginRight | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none' | The marginRight property sets the margin area on the right side of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
transitionTimingFunction | 'ease' 'ease-in' 'ease-in-out' 'ease-out' 'linear' 'step-end' 'step-start' | The transitionTimingFunction property sets how intermediate values are calculated for CSS properties being affected by a transition effect. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
transitionProperty | string | The transitionProperty property sets the CSS properties to which a transition effect should be applied. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
transitionDelay | string | The transitionDelay property specifies the duration to wait before starting a property's transition effect when its value changes. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
transitionDuration | 'base' 'fast' 'slow' 'slower' | The transitionDuration property sets the length of time a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
zIndex | '100' '200' '300' '400' '500' '600' '700' '800' '900' | The zIndex property specifies the stack order of the box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
backgroundImage | string | The backgroundImage property sets one or more background images on an element. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
backgroundPosition | string | The backgroundPosition property sets the initial position for each background image. The position is relative to the position layer set by background-origin. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
backgroundBlendMode | string | The backgroundBlendMode property sets how an element's background images should blend with each other and with the element's background color. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
backgroundRepeat | string | The backgroundRepeat property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
textDecoration | 'none' 'underline' | The textDecoration shorthand property sets the appearance of decorative lines on text. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
backgroundSize | string | The backgroundSize property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
p | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none' | The p shorthand property sets the margin area on all four sides of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
pl | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none' | The pl shorthand property sets the width of the padding area to the left of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
pr | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none' | The pl shorthand property sets the width of the padding area to the right of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
pt | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none' | The pt shorthand property sets the height of the padding area on the top of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
pb | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none' | The pb shorthand property sets the height of the padding area on the botton of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
px | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none' | The px shorthand property defines the width of the left and right padding area of a box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
py | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none' | The py pt shorthand property sets the height of the padding area at the top and bottom of a box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
paddingX | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none' | The paddingX shorthand property defines the width of the left and right padding area of a box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
paddingY | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none' | The paddingY pt shorthand property sets the height of the padding area at the top and bottom of a box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
m | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none' | The m shorthand property sets the margin area on all four sides of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
mr | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none' | The mr property sets the margin area on the right side of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
ml | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none' | The ml property sets the margin area on the left side of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
mt | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none' | The mt property sets the margin area on the top of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
mb | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none' | The marginBottom property sets the margin area on the bottom of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
mx | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none' | The mx property defines the margin area on the left and right side of a box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
my | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none' | The my property defines the margin area on the top and bottom of a box This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
marginX | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none' | The marginX property defines the margin area on the left and right side of a box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
marginY | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none' | The marginY property defines the margin area on the top and bottom of a box This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
fontSize | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'h1' 'h2' 'h3' 'h4' 'h5' 'h6' | 'base' | The fontSize property sets the size of the box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' |
fontWeight | 'bold' 'medium' 'regular' | 'regular' | The fontWeight property sets how thick or thin characters in box should be displayed. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' |
lineHeight | '0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'h1' 'h2' 'h3' 'h4' 'h5' 'h6' | 'base' | The lineHeight property specifies the line height of the box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' |
textAlign | 'center' 'justify' 'left' 'right' | 'left' | The textAlign property specifies the horizontal alignment of box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }' |