Panel

Interfaces

PanelBlockProps

Props for the PanelBlock component.

Extends

• AnchorHTMLAttributes<HTMLAnchorElement>

Properties

Property	Type	Description	Overrides
active?	boolean	Whether the block is active.	-
children?	ReactNode	Block content.	React.AnchorHTMLAttributes.children
className?	string	Additional CSS classes.	React.AnchorHTMLAttributes.className

---

PanelButtonBlockProps

Props for the PanelButtonBlock component.

Extends

• ButtonHTMLAttributes<HTMLButtonElement>

Properties

Property	Type	Description	Overrides
children?	ReactNode	Button content.	React.ButtonHTMLAttributes.children

---

PanelCheckboxBlockProps

Props for the PanelCheckboxBlock component.

Extends

• Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "onChange">

Properties

Property	Type	Description	Overrides
checked?	boolean	Whether the checkbox is checked.	-
children?	ReactNode	Label/content.	Omit.children
onChange?	ChangeEventHandler<HTMLInputElement>	Checkbox change handler.	-

---

PanelHeadingProps

Props for the PanelHeading component.

Extends

• HTMLAttributes<HTMLParagraphElement>

Properties

Property	Type	Description	Overrides
children?	ReactNode	Heading content.	React.HTMLAttributes.children
className?	string	Additional CSS classes.	React.HTMLAttributes.className

---

PanelIconProps

Props for the PanelIcon component.

Extends

• HTMLAttributes<HTMLSpanElement>

Properties

Property	Type	Description	Overrides
children?	ReactNode	Icon content.	React.HTMLAttributes.children
className?	string	Additional CSS classes.	React.HTMLAttributes.className

---

PanelInputBlockProps

Props for the PanelInputBlock component.

Extends

• HTMLAttributes<HTMLDivElement>

Properties

Property	Type	Description	Overrides
iconClassName?	string	Icon class for left icon (default 'fas fa-search').	-
onChange?	ChangeEventHandler<HTMLInputElement>	Input change handler.	React.HTMLAttributes.onChange
placeholder?	string	Input placeholder.	-
value?	string	Input value.	-

---

PanelProps

Props for the Panel component.

Extends

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

Properties

Property	Type	Description	Overrides
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?	ReactNode	Panel content.	React.HTMLAttributes.children
className?	string	Additional CSS classes.	React.HTMLAttributes.className
color?	"primary" | "link" | "info" | "success" | "warning" | "danger" | "black" | "white" | "light" | "dark"	Bulma color modifier for the panel.	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').	-
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?	boolean	Applies 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').	-
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').	-

---

PanelTabsProps

Props for the PanelTabs component.

Extends

• HTMLAttributes<HTMLDivElement>

Properties

Property	Type	Description	Overrides
children?	ReactNode	Tabs content.	React.HTMLAttributes.children
className?	string	Additional CSS classes.	React.HTMLAttributes.className

Variables

PanelBlock

const PanelBlock: React.FC<PanelBlockProps>

Bulma Panel block.

---

PanelButtonBlock

const PanelButtonBlock: React.FC<PanelButtonBlockProps>

Bulma Panel button block.

---

PanelCheckboxBlock

const PanelCheckboxBlock: React.FC<PanelCheckboxBlockProps>

Bulma Panel checkbox block.

---

PanelHeading

const PanelHeading: React.FC<PanelHeadingProps>

Bulma Panel heading.

---

PanelIcon

const PanelIcon: React.FC<PanelIconProps>

Bulma Panel icon.

---

PanelInputBlock

const PanelInputBlock: React.FC<PanelInputBlockProps>

Bulma Panel input block.

---

PanelTabs

const PanelTabs: React.FC<PanelTabsProps>

Bulma Panel tabs.

Functions

Panel()

Panel(props, deprecatedLegacyContext?): ReactNode

Bulma Panel component, supports various panel subcomponents.

Parameters

props

PanelProps

Props for the Panel component.

deprecatedLegacyContext?

any

Deprecated

See

React Docs

Returns

ReactNode

The rendered panel.

See

Bulma Panel documentation

References

default

Renames and re-exports Panel