Button

Inputs & Controls

Button

Material 3 button set with text, outlined, contained, tonal, and elevated variants.

Usage

Trigger primary workflows, confirm actions, or launch dialogs across surfaces.

Highlights

• State layer + ripple feedback
• Integrated loading indicator and icon slots

When to use it

• You need accessible CTA with consistent spacing.
• Buttons must adapt to tokens via variant system.

Related components

IconButtonFABStateLayer

Examples

Text Button

Preview (Web)

import { Button } from 'react-native-molecules/components/Button';

export default function Example() {
  const handlePress = () => {
      console.log('Pressed text button');
  };

  return (
      <Button variant="text" onPress={handlePress}>
          Default Button
      </Button>
  );
}

Contained Button

Preview (Web)

import { Button } from 'react-native-molecules/components/Button';

export default function Example() {
  return (
      <Button variant="contained" onPress={() => console.log('Pressed contained')}>
          Contained Button
      </Button>
  );
}

Outlined Button

Preview (Web)

import { Button } from 'react-native-molecules/components/Button';

export default function Example() {
  return (
      <Button variant="outlined" onPress={() => console.log('Pressed outlined')}>
          Outlined Button
      </Button>
  );
}

Contained Tonal Button

Preview (Web)

import { Button } from 'react-native-molecules/components/Button';

export default function Example() {
  return (
      <Button variant="contained-tonal" onPress={() => console.log('Pressed tonal')}>
          Contained Tonal Button
      </Button>
  );
}

Elevated Button

Preview (Web)

import { Button } from 'react-native-molecules/components/Button';

export default function Example() {
  return (
      <Button variant="elevated" onPress={() => console.log('Pressed elevated')}>
          Elevated Button
      </Button>
  );
}

Prop	Type	Default	Description
childrenRequired	ReactNode	—	—
testID	string | undefined	—	—
accessibilityLabel	string | undefined	—	—
accessibilityHint	string | undefined	—	—
elevation	MD3Elevation | undefined	—	—
variant	ButtonVariant | undefined	—	—
buttonColor	string | undefined	—	—
loading	boolean | undefined	—	—
iconType	"material-community" | "feather" | undefined	—	—
iconName	string | undefined	—	—
iconSize	number | undefined	—	—
disabled	boolean | undefined	—	—
onPress	(() => void) | undefined	—	—
onPressIn	(() => void) | undefined	—	—
onPressOut	(() => void) | undefined	—	—
onLongPress	(() => void) | undefined	—	—
contentStyle	StyleProp<ViewStyle>	—	—
style	StyleProp<TextStyle>	—	—
labelStyle	TextStyle | undefined	—	—
iconContainerStyle	StyleProp<ViewStyle>	—	—
iconStyle	StyleProp<TextStyle>	—	—
size	ButtonSize | undefined	—	—
stateLayerProps	ViewProps | undefined	—	—
textRelatedStyle	StyleProp<TextStyle>	—	—

Defined in react-native-molecules/components/Button