Icon Label

A simple pattern for pairing an icon with text. This is one of the most common UI patterns and is easily composed using the Row, Icon, and Text components.

Settings

Source


'use client';
 
import { Icon, Row, Text } from '@umami/react-zen';
 
export function IconLabel({ icon, label, size = 'md', children, ...props }) {
  const iconSize = size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md';
  const textSize = size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'base';
 
  return (
    <Row alignItems="center" gap="2" {...props}>
      <Icon size={iconSize}>{icon}</Icon>
      {label && <Text size={textSize}>{label}</Text>}
      {children}
    </Row>
  );
}

Variations

Different sizes

Small

Medium

Large

As a button

With children instead of label

Messages(3 unread)