Panel

Overview

The Panel component implements Bulma's versatile panel block for React.

It provides a convenient way to display lists, filters, navigation menus, or grouped actions in a card-like vertical container. The Panel supports color modifiers, search, tabs, icons, selectable blocks, and comes with several subcomponents for every panel part.

info

Use Panel for sidebar menus, filter lists, admin navigation, or any grouped interface actions.

---

Import

import { Panel } from '@allxsmith/bestax-bulma';

---

Usage

Complete Panel (Revolutionary Figures)

This example shows a complete panel layout using Panel and its subcomponents. The Panel.Heading provides a title, Panel.InputBlock adds a search field, and Panel.Tabs enables filtering. Use Panel.Block for each selectable item, optionally with an active state, and Panel.Icon to display icons. This structure is ideal for sidebars, filter lists, or admin menus. The color prop customizes the panel's appearance.

<Panel>
  <Panel.Heading>Revolutionary Figures</Panel.Heading>
  <Panel.InputBlock placeholder="Search" />
  <Panel.Tabs>
    <a className="is-active">All</a>
    <a>Patriots</a>
    <a>Loyalists</a>
    <a>Battles</a>
    <a>Documents</a>
  </Panel.Tabs>
  <Panel.Block active>
    <Panel.Icon name="user" variant="solid" />
    George Washington
  </Panel.Block>
  <Panel.Block>
    <Panel.Icon name="user" variant="solid" />
    Alexander Hamilton
  </Panel.Block>
  <Panel.Block>
    <Panel.Icon name="user" variant="solid" />
    Benedict Arnold
  </Panel.Block>
  <Panel.Block>
    <Panel.Icon name="user" variant="solid" />
    John Adams
  </Panel.Block>
  <Panel.Block>
    <Panel.Icon name="flag" variant="solid" />
    Battle of Saratoga
  </Panel.Block>
  <Panel.Block>
    <Panel.Icon name="flag" variant="solid" />
    Treaty of Paris
  </Panel.Block>
  <Panel.Block>
    <Panel.Icon name="flag" variant="solid" />
    Bunker Hill
  </Panel.Block>
  <Panel.CheckboxBlock>remember me</Panel.CheckboxBlock>
  <Panel.ButtonBlock>Reset all filters</Panel.ButtonBlock>
</Panel>

---

Color Variants

This example demonstrates the Panel component's color variants. The color prop applies Bulma's color modifiers to the panel. Each panel in this example uses a different color, showcasing the flexibility of the Panel component in adapting to various design requirements.

<>
  {(
    [
      'primary',
      'link',
      'info',
      'success',
      'warning',
      'danger',
      'black',
      'dark',
      'light',
      'white',
    ] as const
  ).map(color => (
    <Panel key={color} color={color}>
      <Panel.Heading>
        {color.charAt(0).toUpperCase() + color.slice(1)} Panel
      </Panel.Heading>
      <Panel.InputBlock placeholder="Search" />
      <Panel.Block active>
        <Panel.Icon name="user" variant="solid" />
        George Washington
      </Panel.Block>
      <Panel.Block>
        <Panel.Icon name="user" variant="solid" />
        Marquis de Lafayette
      </Panel.Block>
      <Panel.Block>
        <Panel.Icon name="user" variant="solid" />
        Nathanael Greene
      </Panel.Block>
      <Panel.Block>
        <Panel.Icon name="flag" variant="solid" />
        Battle of Trenton
      </Panel.Block>
      <Panel.Block>
        <Panel.Icon name="flag" variant="solid" />
        Yorktown
      </Panel.Block>
      <Panel.ButtonBlock>Reset all filters</Panel.ButtonBlock>
    </Panel>
  ))}
</>

---

A Panel That Is Not Navigation

Panel renders a <nav>, a navigation landmark, which suits a panel of links. For one that is not navigation, as renders it as an article (Bulma's own colored panels use one), a section, an aside or a div. A section is a region landmark once it has an accessible name, here its heading through aria-labelledby. Panel.Block renders an <a> unless as says div or label: a div block holds content that is not a link, such as a table.

<Panel as="section" color="info" aria-labelledby="panel-sessions">
  <Panel.Heading id="panel-sessions">Congress Sessions</Panel.Heading>
  <Panel.Block as="div">
    <Table isFullwidth>
      <Table.Thead>
        <Table.Tr>
          <Table.Th>Date</Table.Th>
          <Table.Th>Session</Table.Th>
        </Table.Tr>
      </Table.Thead>
      <Table.Tbody>
        <Table.Tr>
          <Table.Td>1774</Table.Td>
          <Table.Td>First Continental Congress</Table.Td>
        </Table.Tr>
        <Table.Tr>
          <Table.Td>1775</Table.Td>
          <Table.Td>Second Continental Congress</Table.Td>
        </Table.Tr>
      </Table.Tbody>
    </Table>
  </Panel.Block>
  <Panel.Block href="#delegates">
    <Panel.Icon name="user" variant="solid" />
    All delegates
  </Panel.Block>
</Panel>

---

Compound (dot-notation) usage

Every subcomponent is exported by name (PanelHeading, PanelBlock, …) and attached to Panel as a static, so a whole panel can be composed from the single Panel import.

<Panel>
  <Panel.Heading>Founding Documents</Panel.Heading>
  <Panel.Block active>
    <Panel.Icon name="file" variant="solid" />
    Declaration of Independence
  </Panel.Block>
  <Panel.Block>
    <Panel.Icon name="file" variant="solid" />
    Articles of Confederation
  </Panel.Block>
  <Panel.ButtonBlock>Reset all filters</Panel.ButtonBlock>
</Panel>

---

Accessibility

• The root panel renders as a semantic <nav>, a navigation landmark, by default. For a panel that is not navigation, set as to article, section, aside or div, and give a section an accessible name (for example aria-labelledby pointing at the Panel.Heading's id) if it should be a region.
• Use headings, links, and buttons with appropriate labels for best accessibility.
• The Panel.Block by default renders as an anchor <a>. Its props follow as: only an a takes the anchor attributes (href, target, download and the rest), and only a label takes htmlFor and form. A block on another tag drops them, and rel, at runtime too.

note

For keyboard navigation, ensure interactive Panel blocks are focusable and provide clear visual states.

---

Related Components

• Icon: For icons inside Panel.Icon.
• Helper Props: All Bulma utility helpers can be used.

---

Additional Resources

• Bulma Panel Documentation
• Storybook: Panel Stories

Pro Tip

You can use all Bulma helper props with <Panel /> and its subcomponents for powerful utility-based styling.

---

Props

Prop	Type	Default	Description
as	'nav' | 'article' | 'section' | 'aside' | 'div'	'nav'	HTML element to render (default: nav). A nav is a navigation landmark, which suits a panel of links; a panel that is not navigation takes another tag. Bulma's own colored panels use article. A section is a region landmark only once it has an accessible name, such as aria-labelledby pointing at the id of its Panel.Heading.
color	'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'dark' | 'light' | 'white'	—	Bulma color modifier for the panel.
className	string	—	Additional CSS classes.
children	React.ReactNode	—	Panel content (usually includes subcomponents).
...	All standard HTML attributes and Bulma helper props	—	See Helper Props

Subcomponents:

• Panel.Heading: Main heading (renders as <p class="panel-heading">)
• Panel.Tabs: Panel tabs (renders as <p class="panel-tabs">)
• Panel.Block: Individual panel block (renders as <a class="panel-block"> unless as says otherwise)
• Panel.Icon: Icon wrapper with panel styling (renders as <span class="panel-icon">, containing an <i/> when a name is given, or the custom node passed as children). Accepts all Icon props (name, variant, features, etc.), or children for a custom node.
• Panel.InputBlock: Search input with icon (renders as <div class="panel-block">)
• Panel.CheckboxBlock: Checkbox block (renders as <label class="panel-block">)
• Panel.ButtonBlock: Call-to-action button (renders as <div class="panel-block"><button /></div>)

Panel.Heading

Prop	Type	Default	Description
className	string	—	Additional CSS classes.
children	React.ReactNode	—	Heading content.
...	All standard <p> attributes	—

Panel.Tabs

Prop	Type	Default	Description
className	string	—	Additional CSS classes.
children	React.ReactNode	—	Tabs content.
...	All standard <div> attributes	—

Panel.Block

Prop	Type	Default	Description
as	'a' | 'div' | 'label'	'a'	HTML element to render (default: a). Bulma styles a label block as clickable, like an a, and a div block as static content, such as a table. The props follow the tag, so the anchor attributes (href, target, download and the rest) are typed only on an a and htmlFor only on a label; at runtime the block also drops them, and rel, on the other tags. Panel.CheckboxBlock, Panel.InputBlock and Panel.ButtonBlock render the usual label and div blocks with their contents.
className	string	—	Additional CSS classes.
active	boolean	false	Whether the block is active.
children	React.ReactNode	—	Block content.
...	Remaining props of the element selected by as (default <a>)	—

Panel.Icon

Prop	Type	Default	Description
name	string | undefined	—	The icon name, with or without its library prefix (e.g. 'star' or 'fa-star'). Mutually exclusive with children.
children	Exclude<React.ReactNode, undefined>	—	A custom node (an inline SVG, a react-icons component, …) rendered inside the icon container in place of a class-based glyph. Mutually exclusive with name.
icon	string	—	Deprecated. Use name instead. Legacy icon class string (e.g. 'fas fa-star'). Only its last segment is read, as the glyph name; the library still comes from library or ConfigProvider, so 'mdi mdi-rocket' renders an fa class unless the effective library is already mdi — set it here or on the provider.
className	string	—	Additional CSS classes to apply.
textColor	Bulma color | 'inherit' | 'current'	—	Text color helper.
color	'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'	—	Text color alias: renders has-text-<color>, exactly like textColor. Not a filled variant (no .icon.is-<color> CSS exists). Prefer textColor, which takes precedence when both are set; use bgColor for a colored surface.
bgColor	Bulma color | 'inherit' | 'current'	—	Background color helper.
library	'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols'	'fa'	The icon library to use ('fa' = Font Awesome, 'mdi' = Material Design Icons, 'ion' = Ionicons Web Components, 'material-icons' = Google Material Icons, 'material-symbols' = Google Material Symbols). Defaults to the value set in ConfigProvider or 'fa' if not configured. Ignored when children supplies the glyph instead of name.
variant	string	—	Icon style variant (e.g. 'solid', 'outlined', 'rounded'). Ignored when children supplies the glyph instead of name.
features	string | string[]	—	Additional modifiers (e.g. 'fa-lg', 'fa-spin', 'is-size-1'). Ignored when children supplies the glyph instead of name.
libraryFeatures	string | string[]	—	Deprecated. Use variant and features instead. Additional modifiers in the older combined form, parsed into variant and features.
size	'small' | 'medium' | 'large'	—	Size modifier for the icon container.
ariaLabel	string	—	Accessible name for an icon that means something on its own. Set it and the container span gets role="img" with this aria-label, so the name is exactly this text: a Material ligature such as rocket_launch inside stays out of it. Leave it unset (or empty) and the icon is decorative: the span renders aria-hidden="true" and no name, so it adds nothing to the accessible name of a Button or text around it. For an icon-only control, put the name on the control (e.g. Button's aria-label) and leave this unset. A non-empty native aria-label or aria-labelledby passed instead also counts as a name, and an explicit role or aria-hidden wins over both defaults. An unnamed icon given a role or a tabIndex of its own isn't hidden, since hiding something focusable is a failure of its own.
style	React.CSSProperties	—	Inline style object.
...	All standard <span> attributes and Bulma helper props	—	See Helper Props

Panel.InputBlock

Prop	Type	Default	Description
value	string	—	Input value.
onChange	React.ChangeEventHandler<HTMLInputElement>	—	Input change handler.
placeholder	string	—	Input placeholder.
iconClassName	string	'fas fa-search'	Icon class for left icon (default 'fas fa-search').
className	string	—	Additional CSS classes.
...	All standard <div> attributes	—

Panel.CheckboxBlock

Prop	Type	Default	Description
checked	boolean	false	Whether the checkbox is checked.
onChange	React.ChangeEventHandler<HTMLInputElement>	—	Checkbox change handler.
children	React.ReactNode	—	Label/content.
className	string	—	Additional CSS classes.
...	All standard <label> attributes	—

Panel.ButtonBlock

Prop	Type	Default	Description
children	React.ReactNode	—	Button content.
className	string	—	Additional CSS classes.
...	All standard <button> attributes	—

CSS & Sass Variables

Panel registers these variables on its own .panel element. Override them there (or via className) — a value set on an ancestor is only inherited, and loses to the component-level declaration. See Theme.

CSS Variable	Sass Variable	Default
--bulma-panel-margin	$panel-margin	var(--bulma-block-spacing)
--bulma-panel-item-border	$panel-item-border	1px solid var(--bulma-border-weak)
--bulma-panel-radius	$panel-radius	var(--bulma-radius-large)
--bulma-panel-shadow	$panel-shadow	var(--bulma-shadow)
--bulma-panel-heading-line-height	$panel-heading-line-height	1.25
--bulma-panel-heading-padding	$panel-heading-padding	1em 1.25em
--bulma-panel-heading-radius	$panel-heading-radius	var(--bulma-radius)
--bulma-panel-heading-size	$panel-heading-size	1.25em
--bulma-panel-heading-weight	$panel-heading-weight	var(--bulma-weight-bold)
--bulma-panel-tabs-font-size	$panel-tabs-font-size	1em
--bulma-panel-tab-border-bottom-color	$panel-tab-border-bottom-color	var(--bulma-border)
--bulma-panel-tab-border-bottom-style	$panel-tab-border-bottom-style	solid
--bulma-panel-tab-border-bottom-width	$panel-tab-border-bottom-width	1px
--bulma-panel-tab-active-color	$panel-tab-active-color	var(--bulma-link-active)
--bulma-panel-list-item-color	$panel-list-item-color	var(--bulma-text)
--bulma-panel-list-item-hover-color	$panel-list-item-hover-color	var(--bulma-link)
--bulma-panel-block-color	$panel-block-color	var(--bulma-text-strong)
--bulma-panel-block-hover-background-color	$panel-block-hover-background-color	var(--bulma-background)
--bulma-panel-block-active-border-left-color	$panel-block-active-border-left-color	var(--bulma-link)
--bulma-panel-block-active-color	$panel-block-active-color	var(--bulma-link-active)
--bulma-panel-block-active-icon-color	$panel-block-active-icon-color	var(--bulma-link)
--bulma-panel-icon-color	$panel-icon-color	var(--bulma-text-weak)
--bulma-panel-h	—	var(--bulma-scheme-h)
--bulma-panel-s	—	var(--bulma-scheme-s)
--bulma-panel-color-l	—	var(--bulma-text-l)
--bulma-panel-heading-background-l	—	var(--bulma-text-l)
--bulma-panel-heading-color-l	—	var(--bulma-text-invert-l)