Function ButtonExample

example/src/Examples/ButtonExample.tsx:9–356

()

import ScreenWrapper from '../ScreenWrapper';

const ButtonExample = () => {
  const theme = useExampleTheme();

  const color = theme.isV3 ? theme.colors.inversePrimary : theme.colors.accent;

  return (
    <ScreenWrapper>
      <List.Section title={`Text button ${theme.isV3 ? '(text)' : ''}`}>
        <View style={styles.row}>
          <Button onPress={() => {}} style={styles.button}>
            Default
          </Button>
          <Button textColor={color} onPress={() => {}} style={styles.button}>
            Custom
          </Button>
          <Button disabled onPress={() => {}} style={styles.button}>
            Disabled
          </Button>
          <Button icon="camera" onPress={() => {}} style={styles.button}>
            Icon
          </Button>
          <Button loading onPress={() => {}} style={styles.button}>
            Loading
          </Button>
          <Button
            icon="camera"
            onPress={() => {}}
            style={styles.button}
            contentStyle={styles.flexReverse}
          >
            Icon right
          </Button>
        </View>
      </List.Section>
      {theme.isV3 && (
        <List.Section title="Contained-tonal button (tonal)">
          <View style={styles.row}>
            <Button
              mode="contained-tonal"
              onPress={() => {}}
              style={styles.button}
            >
              Default
            </Button>
            <Button
              mode="contained-tonal"
              buttonColor={color}
              onPress={() => {}}
              style={styles.button}
            >
              Custom
            </Button>
            <Button
              mode="contained-tonal"
              disabled
              onPress={() => {}}
              style={styles.button}
            >