Skip to main content

Documentation Index

Fetch the complete documentation index at: https://copylabs.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

​
IconButton

IconButton is a button component specifically designed for rendering icons with various styles.

​
Import

import { IconButton } from 'radix-native-ui';

​
Usage

import { IconButton } from 'radix-native-ui';
import { Icon } from './icons';

<IconButton onPress={() => console.log('Pressed!')}>
  <Icon name="plus" />
</IconButton>

​
Props

​
Haptic Feedback

Icon buttons provide haptic feedback by default when pressed. You can disable this with the hapticFeedback prop: 
<IconButton hapticFeedback={false} accessibilityLabel="No haptic">
  <Icon name="settings" />
</IconButton>

​
Examples

​
Variants

<IconButton variant="classic" accessibilityLabel="Add">
  <Icon name="plus" />
</IconButton>

<IconButton variant="solid" accessibilityLabel="Add">
  <Icon name="plus" />
</IconButton>

<IconButton variant="soft" accessibilityLabel="Add">
  <Icon name="plus" />
</IconButton>

<IconButton variant="outline" accessibilityLabel="Add">
  <Icon name="plus" />
</IconButton>

<IconButton variant="ghost" accessibilityLabel="Add">
  <Icon name="plus" />
</IconButton>

​
Sizes

<IconButton size={1} accessibilityLabel="Small">
  <Icon name="plus" size={14} />
</IconButton>

<IconButton size={2} accessibilityLabel="Medium">
  <Icon name="plus" size={16} />
</IconButton>

<IconButton size={3} accessibilityLabel="Large">
  <Icon name="plus" size={20} />
</IconButton>

<IconButton size={4} accessibilityLabel="Extra Large">
  <Icon name="plus" size={28} />
</IconButton>

​
Colors

<IconButton color="blue" accessibilityLabel="Blue">
  <Icon name="plus" />
</IconButton>

<IconButton color="red" accessibilityLabel="Red">
  <Icon name="plus" />
</IconButton>

<IconButton color="green" accessibilityLabel="Green">
  <Icon name="plus" />
</IconButton>

​
Toolbar

<Flex direction="row" gap={2}>
  <IconButton variant="soft" accessibilityLabel="Bold">
    <Icon name="bold" />
  </IconButton>
  <IconButton variant="soft" accessibilityLabel="Italic">
    <Icon name="italic" />
  </IconButton>
  <IconButton variant="soft" accessibilityLabel="Underline">
    <Icon name="underline" />
  </IconButton>
</Flex>

​
With Loading

<IconButton loading accessibilityLabel="Loading">
  <Icon name="refresh" />
</IconButton>
  • Button - Regular button component
  • Badge - Badge component
  • Button - Regular button component
  • Badge - Badge component