Skip to main content

Tab

Interfaces

TabItemProps

Props for the TabItem component.

Extends

  • LiHTMLAttributes<HTMLLIElement>

Properties

PropertyTypeDescriptionOverrides
active?booleanWhether the tab is active.-
children?ReactNodeTab content.React.LiHTMLAttributes.children
className?stringAdditional CSS classes.React.LiHTMLAttributes.className
onClick?MouseEventHandler<HTMLLIElement>Click handler.React.LiHTMLAttributes.onClick

TabListProps

Props for the TabList component.

Extends

  • HTMLAttributes<HTMLUListElement>

Properties

PropertyTypeDescriptionOverrides
children?ReactNodeTab list items.React.HTMLAttributes.children
className?stringAdditional CSS classes.React.HTMLAttributes.className

TabsProps

Props for the Tabs component.

Extends

  • HTMLAttributes<HTMLDivElement>.Omit<BulmaClassesProps, "color" | "backgroundColor">

Properties

PropertyTypeDescriptionOverrides
align?"centered" | "left" | "right"Tab alignment.-
alignContent?"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch"Align content (e.g., 'center', 'stretch').-
alignItems?"flex-start" | "flex-end" | "center" | "start" | "end" | "stretch" | "baseline"Align items (e.g., 'center', 'flex-start').-
alignSelf?"auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline"Align self (e.g., 'auto', 'center').-
boxed?booleanTabs are boxed style.-
children?ReactNodeTab content.React.HTMLAttributes.children
className?stringAdditional CSS classes.React.HTMLAttributes.className
color?"primary" | "link" | "info" | "success" | "warning" | "danger" | "black" | "white" | "light" | "dark"Bulma color for the tabs.React.HTMLAttributes.color
colorShade?"00" | "05" | "10" | "15" | "20" | "25" | "30" | "35" | "40" | "45" | "50" | "55" | "60" | "65" | "70" | "75" | "80" | "85" | "90" | "95" | "invert"Color shade suffix (e.g., '00', 'invert').-
display?"block" | "flex" | "inline" | "inline-block" | "inline-flex"Display type (e.g., 'block', 'flex').-
flexDirection?"row" | "row-reverse" | "column" | "column-reverse"Flex direction (e.g., 'row', 'column').-
flexGrow?"0" | "1"Flex grow value (e.g., '0', '1').-
flexShrink?"0" | "1"Flex shrink value (e.g., '0', '1').-
flexWrap?"nowrap" | "wrap" | "wrap-reverse"Flex wrap (e.g., 'wrap', 'nowrap').-
float?"left" | "right"Float direction (e.g., 'left', 'right').-
fontFamily?"primary" | "sans-serif" | "monospace" | "secondary" | "code"Font family (e.g., 'sans-serif', 'code').-
fullwidth?booleanTabs are fullwidth.-
interaction?"unselectable" | "clickable"Interaction behavior (e.g., 'unselectable', 'clickable').-
justifyContent?"left" | "right" | "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "start" | "end"Justify content (e.g., 'center', 'space-between').-
m?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin (e.g., '0', '1').-
mb?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin bottom.-
ml?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin left.-
mr?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin right.-
mt?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin top.-
mx?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin horizontal (left and right).-
my?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin vertical (top and bottom).-
overflow?"clipped"Overflow behavior (e.g., 'clipped').-
overlay?booleanApplies overlay styling if true.-
p?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding (e.g., '0', '1').-
pb?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding bottom.-
pl?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding left.-
pr?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding right.-
pt?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding top.-
px?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding horizontal (left and right).-
py?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding vertical (top and bottom).-
radius?"radiusless"Border radius style (e.g., 'radiusless').-
responsive?"mobile" | "narrow"Responsive behavior (e.g., 'mobile', 'narrow').-
rounded?booleanTabs are rounded (if toggle).-
shadow?"shadowless"Shadow style (e.g., 'shadowless').-
size?"medium" | "small" | "large"Tab size.-
textAlign?"centered" | "justified" | "left" | "right"Text alignment (e.g., 'centered', 'left').-
textSize?"1" | "2" | "3" | "4" | "5" | "6" | "7"Text size (e.g., '1', '2').-
textTransform?"capitalized" | "lowercase" | "uppercase" | "italic"Text transformation (e.g., 'uppercase', 'italic').-
textWeight?"light" | "normal" | "medium" | "semibold" | "bold"Text weight (e.g., 'light', 'bold').-
toggle?booleanTabs are toggle style.-
viewport?"mobile" | "tablet" | "desktop" | "widescreen" | "fullhd"Viewport for responsive classes (e.g., 'mobile', 'desktop').-
visibility?"hidden" | "sr-only"Visibility (e.g., 'hidden', 'sr-only').-

Functions

TabItem()

TabItem(props, deprecatedLegacyContext?): ReactNode

Bulma Tab item.

Parameters

props

TabItemProps

Props for the TabItem component.

deprecatedLegacyContext?

any

Deprecated

See

React Docs

Returns

ReactNode

The rendered tab item.


TabList()

TabList(props, deprecatedLegacyContext?): ReactNode

Bulma Tab list container.

Parameters

props

TabListProps

Props for the TabList component.

deprecatedLegacyContext?

any

Deprecated

See

React Docs

Returns

ReactNode

The rendered tab list.


Tabs()

Tabs(props, deprecatedLegacyContext?): ReactNode

Bulma Tabs component with subcomponents for tab lists and items.

Parameters

props

TabsProps

Props for the Tabs component.

deprecatedLegacyContext?

any

Deprecated

See

React Docs

Returns

ReactNode

The rendered tabs.

See

Bulma Tabs documentation

References

default

Renames and re-exports Tabs