Icon Text

The IconText component displays an icon alongside text and supports customizable alignment, spacing, icon size, text size, and individual styling.

It also supports rendering the text as either a simple string or a custom ReactNode.

import { IconText } from "tawuniya/components";

👉 View in Storybook

Props

Prop	Type	Default	Description
icon	React.ReactNode	-	Icon displayed before the text.
text	string | React.ReactNode	-	Content displayed next to the icon. Strings are rendered using Typography, while ReactNodes are rendered directly.
align	VariantProps<typeof iconTextVariants>	-	Controls the alignment of the icon and text.
gap	VariantProps<typeof iconTextVariants>	-	Controls the spacing between the icon and text.
iconSize	VariantProps<typeof iconTextVariants>	-	Controls the icon wrapper size.
textSize	VariantProps<typeof iconTextVariants>	-	Controls the text size when text is a string.
classNames	object	-	Provides custom classes for the container, icon, and text.

classNames

Property	Type	Description
container	string	Custom classes applied to the main container.
icon	string	Custom classes applied to the icon wrapper.
text	string	Custom classes applied to the text when text is a string.

Usage

Basic Example

<IconText
  icon={<Icon name="checkbox-circle-fill" />}
  text="Roadside Assistance"
/>

With Custom Icon Size

<IconText
  icon={<Icon name="checkbox-circle-fill" />}
  text="Roadside Assistance"
  iconSize="xs"
/>

With Custom Styling

<IconText
  icon={<Icon name="checkbox-circle-fill" />}
  text="Roadside Assistance"
  classNames={{
    container: "gap-3",
    icon: "text-primary",
    text: "font-medium text-muted-foreground",
  }}
/>

With Custom Alignment and Gap

<IconText
  icon={<Icon name="checkbox-circle-fill" />}
  text="Roadside Assistance"
  align="center"
  gap="lg"
/>

With ReactNode Text

The text prop can receive a custom ReactNode. When a ReactNode is provided, it is rendered directly instead of being wrapped with Typography.

<IconText
  icon={<Icon name="checkbox-circle-fill" />}
  text={
    <span className="font-semibold text-primary">
      Roadside Assistance
    </span>
  }
/>

This is useful when the text requires custom markup or more complex content.

With Custom Text Styling

When text is a string, the classNames.text property can be used to customize the generated Typography component.

<IconText
  icon={<Icon name="checkbox-circle-fill" />}
  text="Roadside Assistance"
  classNames={{
    text: "font-bold text-primary",
  }}
/>

Features

• Icon and text layout in a single reusable component.
• Supports ReactNode icons.
• Supports string or ReactNode text.
• String text is automatically rendered using the Typography component.
• Custom ReactNode text is rendered directly.
• Configurable icon size.
• Configurable text size.
• Configurable alignment.
• Configurable gap between icon and text.
• Individual styling for container, icon, and text.
• Built on top of class-variance-authority for variant management.

Behavior

String Text

When text is a string:

<IconText
  icon={<Icon name="check" />}
  text="Completed"
/>

The text is rendered using the library's Typography component.

ReactNode Text

When text is a valid React element:

<IconText
  icon={<Icon name="check" />}
  text={<strong>Completed</strong>}
/>

The React element is rendered directly.

This allows consumers to provide their own markup and styling.

Customization

The component exposes three styling hooks through classNames:

<IconText
  icon={<Icon name="check" />}
  text="Completed"
  classNames={{
    container: "custom-container",
    icon: "custom-icon",
    text: "custom-text",
  }}
/>

• container customizes the main wrapper.
• icon customizes the icon wrapper.
• text customizes the generated text component.

classNames.text is only applied when text is a string. When a custom ReactNode is provided, the consumer is responsible for styling that node.

Notes

• The icon prop is required.
• The text prop is required.
• classNames.text is intentionally unavailable for the ReactNode text variant at the TypeScript level.
• Use ReactNode for custom text rendering when additional markup or styling is required.
• Variant values such as align, gap, iconSize, and textSize are controlled by iconTextVariants.