Nav Tabs

1.2.3
4.05 kB

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-tabs

Additional props are passed to the <NavTabs> element. See div docs for a list of props accepted by the <NavTabs> element.

NavTabs

NameTypeDefaultDescription

children*

React.ReactNode

Content to be rendered inside the Nav element.

NavTabs.Item

NameTypeDefaultDescription

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" }'