IconText

Overview

The IconText component provides a Bulma-styled horizontal arrangement of one or more Icon components and optional text.

Use it for icon-and-label patterns, ratings, button content, or any visual+text UI. Supports all Bulma helper props for spacing, color, and layout.

tip

Use IconText to keep icons and text vertically aligned and spaced, as recommended by Bulma.

Import

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

Usage

Single Icon + Text

A basic usage of the IconText component with a single icon and text. The iconProps object receives the icon's props, here its library and name. The icon takes no ariaLabel, because the text beside it already says what it means, so it stays hidden from screen readers.

<IconText iconProps={{ library: 'fa', name: 'star' }}>Star</IconText>

With Text Color

You can customize the text color using Bulma's color helpers. This example shows a primary colored text.

<IconText iconProps={{ library: 'fa', name: 'star' }} textColor="primary">
  Star
</IconText>

With Margin

You can use Bulma spacing helpers like m to add margin around the IconText component for better layout control.

<IconText iconProps={{ library: 'fa', name: 'star' }} m="2">
  Star
</IconText>

In a Button

Use IconText inside a button to combine an icon and label, ensuring proper alignment and spacing. Leave the icon unnamed, since the text names the button, as in Button's icon example.

<Button color="primary">
  <IconText
    iconProps={{
      library: 'fa',
      name: 'check',
    }}
  >
    Click Me
  </IconText>
</Button>

In a Notification

Place IconText inside a notification to visually pair an icon with a message, using color and margin helpers for emphasis.

<Notification color="info">
  <IconText
    iconProps={{
      library: 'fa',
      name: 'info-circle',
      textColor: 'dark',
    }}
    m="1"
  >
    Info Notification
  </IconText>
</Notification>

In a Tag

Use IconText inside a tag for labeled icons, such as status indicators or badges.

<Tag color="success" size="medium">
  <IconText
    iconProps={{
      library: 'fa',
      name: 'check',
    }}
  >
    Success
  </IconText>
</Tag>

Multiple Icons and Text

The items prop allows you to render a sequence of icons and optional text, perfect for visualizing progress, routes, or multi-step processes.

Here the icons say something the text doesn't: how the trip is made, which way it goes, and where it ends. So each one keeps an ariaLabel, written as what the icon means rather than what it shows, and a screen reader reads the route as "Train Paris to Budapest to Bucharest to Istanbul End of route".

<IconText
  items={[
    {
      iconProps: { library: 'fa', name: 'train', ariaLabel: 'Train' },
      text: 'Paris',
    },
    {
      iconProps: {
        library: 'fa',
        name: 'arrow-right',
        ariaLabel: 'to',
      },
      text: 'Budapest',
    },
    {
      iconProps: {
        library: 'fa',
        name: 'arrow-right',
        ariaLabel: 'to',
      },
      text: 'Bucharest',
    },
    {
      iconProps: {
        library: 'fa',
        name: 'arrow-right',
        ariaLabel: 'to',
      },
      text: 'Istanbul',
    },
    {
      iconProps: {
        library: 'fa',
        name: 'flag-checkered',
        ariaLabel: 'End of route',
      },
    },
  ]}
  mx="1"
/>

Star Rating Example

This example uses the items prop to display a star rating with icons and text, demonstrating how to build composite icon+text UIs.

Use the Rate Component for Star Ratings

This example demonstrates IconText with multiple icon items. For actual star rating functionality (hover, click, keyboard, precision, etc.), use the dedicated Rate component:

<Rate defaultValue={3.5} color="warning" precision={0.5} showScore />

The stars draw the same rating the 3.5/5 text gives, so they take no ariaLabel, and a screen reader reads the score once rather than star by star.

<IconText
  items={[
    {
      iconProps: {
        library: 'fa',
        name: 'star',
      },
    },
    {
      iconProps: {
        library: 'fa',
        name: 'star',
      },
    },
    {
      iconProps: {
        library: 'fa',
        name: 'star',
      },
    },
    {
      iconProps: {
        library: 'fa',
        name: 'star-half-alt',
      },
    },
    {
      iconProps: {
        library: 'fa',
        name: 'star',
        variant: 'regular',
      },
      text: '3.5/5',
    },
  ]}
  textColor="warning"
  mx="1"
/>

With Flex

The display prop can be used to apply Bulma's flexbox helpers, allowing for flexible alignment and layout of icon and text content.

<IconText
  iconProps={{
    library: 'fa',
    name: 'info-circle',
    textColor: 'info',
  }}
  display="flex"
>
  Information
</IconText>

Compound (dot-notation) usage

Icon is also available as IconText.Icon, so an icon-and-text pairing can be composed from the single IconText import.

<IconText>
  <IconText.Icon name="star" />
  <span>Starred</span>
</IconText>

Accessibility

Icons beside text: Leave an icon that repeats the text beside it unnamed. The unnamed icons on this page pass no ariaLabel, aria-label or aria-labelledby and no role or tabIndex, so each renders aria-hidden="true", and a screen reader reads only the text, which also names a Button or link the IconText sits in. A named icon is read as well, so ariaLabel: 'Check icon' beside "Click Me" makes a button announce "Check icon Click Me".
Icons with meaning of their own: Set ariaLabel on an icon that conveys information the text doesn't, such as the arrows and the finishing flag of a route, and write it as what the icon means rather than what it shows. Standing alone is not the test: the stars of the rating have no text beside them, but they show the score the text gives, so they stay unnamed.
Order: The icon is visually before the text by default.
Keyboard: If used in a button or link, keyboard accessibility is handled by the parent.

info

For star ratings or icon lists, use items with iconProps and optional text.

Icon: For standalone icons.
Button: For icon-button combos.
Helper Props: Bulma helper props for spacing, color, etc.

Additional Resources

Props

Prop	Type	Default	Description
`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-text.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.
`iconProps`	`IconProps` \| `React.ReactNode`	—	Props for a single Icon component, or a custom node, for single icon mode.
`children`	`React.ReactNode`	—	Text for a single icon (for single icon mode).
`items`	`{ iconProps: IconProps \| React.ReactNode; text?: string }[]`	—	Array of icon/text pairs (for multiple icons mode).
`...`	All standard `<span>` attributes and Bulma helper props	—	See Helper Props

Subcomponents:

IconText.Icon: The Icon component is a Bulma-styled wrapper for displaying icons from various libraries (Font Awesome, Material Design Icons, Ionicons, Google Material Icons, Material Symbols, etc.).

CSS & Sass Variables

IconText registers these variables on its own .icon-text 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-icon-dimensions`	`$icon-dimensions`	`1.5rem`
`--bulma-icon-dimensions-small`	`$icon-dimensions-small`	`1rem`
`--bulma-icon-dimensions-medium`	`$icon-dimensions-medium`	`2rem`
`--bulma-icon-dimensions-large`	`$icon-dimensions-large`	`3rem`
`--bulma-icon-text-spacing`	`$icon-text-spacing`	`0.25em`

Overview​

Import​

Usage​

Single Icon + Text​

With Text Color​

With Margin​

In a Button​

In a Notification​

In a Tag​

Multiple Icons and Text​

Star Rating Example​

With Flex​

Compound (dot-notation) usage​

Accessibility​

Related Components​

Additional Resources​

Props​

CSS & Sass Variables​