Skip to main content

Tag

Interfaces

TagProps

Props for the Tag component.

Extends

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

Properties

PropertyTypeDescriptionOverrides
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').-
children?ReactNodeTag content.Omit.children
className?stringAdditional CSS classes to apply.Omit.className
color?"primary" | "link" | "info" | "success" | "warning" | "danger" | "black" | "white" | "light" | "dark"Bulma color modifier for the tag.-
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').-
interaction?"unselectable" | "clickable"Interaction behavior (e.g., 'unselectable', 'clickable').-
isDelete?booleanWhether the tag is a delete button.-
isHoverable?booleanWhether the tag is hoverable.-
isRounded?booleanWhether the tag should have rounded corners.-
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).-
onDelete?() => voidCallback fired when the delete button is clicked.-
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').-
shadow?"shadowless"Shadow style (e.g., 'shadowless').-
size?"normal" | "medium" | "large"Size modifier for the tag.-
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').-
viewport?"mobile" | "tablet" | "desktop" | "widescreen" | "fullhd"Viewport for responsive classes (e.g., 'mobile', 'desktop').-
visibility?"hidden" | "sr-only"Visibility (e.g., 'hidden', 'sr-only').-

Type Aliases

TagColor

TagColor = typeof validTagColors[number]

Valid color values for the Tag component.


TagSize

TagSize = typeof validTagSizes[number]

Valid size values for the Tag component.

Functions

Tag()

Tag(props, deprecatedLegacyContext?): ReactNode

Tag component for rendering a styled Bulma tag.

Supports colors, sizes, rounded, delete, and hoverable variants.

Parameters

props

TagProps

Props for the Tag component.

deprecatedLegacyContext?

any

Deprecated

See

React Docs

Returns

ReactNode

The rendered tag element.