IconButton

Icon buttons help people take supplementary actions with a single tap. Follows the Material Design 3 Icon Button specification.

Usage

import { IconButton } from '@onlynative/components/icon-button'

<IconButton
  icon="heart-outline"
  accessibilityLabel="Favorite"
  onPress={() => {}}
/>

Variants

Variant	Use case
filled	High emphasis, filled container
tonal	Medium emphasis, tonal container
outlined	Medium emphasis, outlined border
standard	Low emphasis, no container

Sizes

<IconButton icon="star" size="small" accessibilityLabel="Star" />
<IconButton icon="star" size="medium" accessibilityLabel="Star" />
<IconButton icon="star" size="large" accessibilityLabel="Star" />

Toggle Mode

Use selected and selectedIcon for toggle behavior:

const [liked, setLiked] = useState(false)

<IconButton
  icon="heart-outline"
  selectedIcon="heart"
  selected={liked}
  onPress={() => setLiked(!liked)}
  accessibilityLabel={liked ? 'Unlike' : 'Like'}
/>

Props

No props found for IconButton.