Skip to main content

​
Overview

The IconButton component provides a compact way to trigger actions using only an icon, without accompanying text. It’s ideal for toolbars, app bars, and actions where space is limited.

​
Import

import { IconButton } from '@naturacosmeticos/natds-react'
import { Icon } from '@naturacosmeticos/natds-react'

​
Basic Usage

import React from 'react'
import { IconButton, Icon } from '@naturacosmeticos/natds-react'

function App() {
  return (
    <IconButton
      ariaLabel="Add to favorites"
      IconComponent={<Icon size="standard" name="outlined-action-love" color="highEmphasis" />}
      onClick={() => console.log('clicked')}
    />
  )
}

​
Sizes

IconButton supports three sizes: 
<IconButton
  ariaLabel="Small button"
  size="semi"
  IconComponent={<Icon size="standard" name="outlined-default-mockup" color="highEmphasis" />}
  onClick={() => {}}
/>

<IconButton
  ariaLabel="Medium button"
  size="semiX"
  IconComponent={<Icon size="semi" name="outlined-default-mockup" color="highEmphasis" />}
  onClick={() => {}}
/>

<IconButton
  ariaLabel="Large button"
  size="medium"
  IconComponent={<Icon size="semiX" name="outlined-default-mockup" color="highEmphasis" />}
  onClick={() => {}}
/>

​
Background Styles

IconButton can have different background treatments: 
<IconButton
  ariaLabel="No background"
  backgroundStyle="none"
  IconComponent={<Icon name="outlined-default-mockup" color="highEmphasis" />}
  onClick={() => {}}
/>

<IconButton
  ariaLabel="Floating background"
  backgroundStyle="float"
  IconComponent={<Icon name="outlined-default-mockup" color="primary" />}
  onClick={() => {}}
/>

<IconButton
  ariaLabel="Overlay background"
  backgroundStyle="overlay"
  IconComponent={<Icon name="outlined-default-mockup" color="surface" />}
  onClick={() => {}}
/>

​
Icon Colors

Match icon colors to different emphasis levels: 
<IconButton
  ariaLabel="High emphasis"
  IconComponent={<Icon name="outlined-default-mockup" color="highEmphasis" />}
  onClick={() => {}}
/>

<IconButton
  ariaLabel="Primary color"
  IconComponent={<Icon name="outlined-default-mockup" color="primary" />}
  onClick={() => {}}
/>

<IconButton
  ariaLabel="Surface color"
  IconComponent={<Icon name="outlined-default-mockup" color="surface" />}
  onClick={() => {}}
/>

​
States

​
Disabled

<IconButton
  ariaLabel="Disabled button"
  disabled
  IconComponent={<Icon name="outlined-default-mockup" color="mediumEmphasis" />}
  onClick={() => {}}
/>

​
Props

​
ariaLabel
string
required
Accessibility label that describes the action. Required for screen readers since there’s no visible text
​
IconComponent
React.ReactElement
required
The Icon component to render inside the button
​
onClick
() => void
required
Function called when the button is clicked
​
size
'semi' | 'semiX' | 'medium'
default:"semi"
The size of the icon button
​
backgroundStyle
'none' | 'float' | 'overlay'
default:"none"
The background style treatment:
  • none: No background (transparent)
  • float: Elevated surface with shadow
  • overlay: Semi-transparent overlay
​
disabled
boolean
default:"false"
Whether the button is disabled
​
className
string
Optional CSS class name for custom styling
​
testID
string
Optional ID for testing purposes
​
accessibility
AriaAttributes
Additional ARIA attributes for enhanced accessibility

​
Accessibility

​
ARIA Label is Required

The ariaLabel prop is mandatory because IconButton has no visible text. This ensures screen reader users understand the button’s purpose. 
<IconButton
  ariaLabel="Delete item"
  IconComponent={<Icon name="outlined-action-delete" color="highEmphasis" />}
  onClick={handleDelete}
/>

​
Additional Accessibility

<IconButton
  ariaLabel="More options"
  accessibility={{
    'aria-haspopup': true,
    'aria-expanded': false,
    'aria-controls': 'menu-id'
  }}
  IconComponent={<Icon name="outlined-navigation-more" color="highEmphasis" />}
  onClick={() => {}}
/>

​
Best Practices

  • Always provide a clear, descriptive ariaLabel
  • Use appropriate icon sizes that match button sizes
  • Ensure sufficient touch target size (minimum 44x44px)
  • Use icon colors that provide sufficient contrast
  • Consider adding tooltips for desktop users
  • Disable buttons appropriately with visual feedback

​
Use Cases

​
Toolbar Actions

<div style={{ display: 'flex', gap: '8px' }}>
  <IconButton
    ariaLabel="Edit"
    IconComponent={<Icon name="outlined-action-edit" color="highEmphasis" />}
    onClick={handleEdit}
  />
  <IconButton
    ariaLabel="Delete"
    IconComponent={<Icon name="outlined-action-delete" color="highEmphasis" />}
    onClick={handleDelete}
  />
  <IconButton
    ariaLabel="Share"
    IconComponent={<Icon name="outlined-action-share" color="highEmphasis" />}
    onClick={handleShare}
  />
</div>

​
Floating Action Button

<IconButton
  ariaLabel="Add new item"
  backgroundStyle="float"
  size="medium"
  IconComponent={<Icon size="semiX" name="outlined-action-add" color="primary" />}
  onClick={handleAdd}
/>

​
TypeScript

import { IconButtonProps } from '@naturacosmeticos/natds-react'
import { IconName } from '@naturacosmeticos/natds-icons'

interface ActionButtonProps {
  iconName: IconName
  onAction: () => void
  label: string
}

const ActionButton: React.FC<ActionButtonProps> = ({ iconName, onAction, label }) => {
  return (
    <IconButton
      ariaLabel={label}
      IconComponent={<Icon name={iconName} color="highEmphasis" />}
      onClick={onAction}
    />
  )
}

​
Related Components

  • Button - For actions with text labels
  • Icon - The icon component used within IconButton

Build docs developers (and LLMs) love

Get started for freeTalk to us