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 name and an ariaLabel for accessibility.

<IconText iconProps={{ library: 'fa', name: 'star', ariaLabel: 'Star icon' }}>
  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', ariaLabel: 'Star icon' }}
  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', ariaLabel: 'Star icon' }}
  m="2"
>
  Star
</IconText>

In a Button

Use IconText inside a button to combine an icon and label, ensuring proper alignment and spacing.

<Button color="primary">
  <IconText
    iconProps={{
      library: 'fa',
      name: 'check',
      ariaLabel: 'Check icon',
    }}
  >
    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',
      ariaLabel: 'Info icon',
      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',
      ariaLabel: 'Check icon',
    }}
  >
    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.

<IconText
  items={[
    {
      iconProps: { library: 'fa', name: 'train', ariaLabel: 'Train icon' },
      text: 'Paris',
    },
    {
      iconProps: {
        library: 'fa',
        name: 'arrow-right',
        ariaLabel: 'Arrow right icon',
      },
      text: 'Budapest',
    },
    {
      iconProps: {
        library: 'fa',
        name: 'arrow-right',
        ariaLabel: 'Arrow right icon',
      },
      text: 'Bucharest',
    },
    {
      iconProps: {
        library: 'fa',
        name: 'arrow-right',
        ariaLabel: 'Arrow right icon',
      },
      text: 'Istanbul',
    },
    {
      iconProps: {
        library: 'fa',
        name: 'flag-checkered',
        ariaLabel: 'Finish icon',
      },
    },
  ]}
  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 />

<IconText
  items={[
    {
      iconProps: {
        library: 'fa',
        name: 'star',
        ariaLabel: 'Star icon',
      },
    },
    {
      iconProps: {
        library: 'fa',
        name: 'star',
        ariaLabel: 'Star icon',
      },
    },
    {
      iconProps: {
        library: 'fa',
        name: 'star',
        ariaLabel: 'Star icon',
      },
    },
    {
      iconProps: {
        library: 'fa',
        name: 'star-half-alt',
        ariaLabel: 'Half star icon',
      },
    },
    {
      iconProps: {
        library: 'fa',
        name: 'star',
        variant: 'regular',
        ariaLabel: 'Empty star icon',
      },
      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',
    ariaLabel: 'Info icon',
    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" ariaLabel="star icon" />
  <span>Starred</span>
</IconText>

Accessibility

ARIA labels: Always set an ariaLabel for icons for screen readers.
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`	—	Props for a single Icon component (for single icon mode).
`children`	`React.ReactNode`	—	Text for a single icon (for single icon mode).
`items`	`{ iconProps: IconProps; 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​