Button

Reusable button component

Example

import {useState} from 'react';

import {
  Button,
  createStyles,
  IButtonSize,
  IButtonTypes,
  SimpleIcon,
  useStyles,
  View,
} from '@lad-tech/mobydick-core';

export const ButtonWidget = () => {
  const [styles] = useStyles(style);
  const [counter, setCounter] = useState(99);

  const onChangeCounter = (value: number) => () => {
    setCounter(val => val + value);
  };

  return (
    <View style={styles.container}>
      <View style={styles.content}>
        <Button type={IButtonTypes.primary} text={'IButtonTypes.primary'} />
        <Button type={IButtonTypes.secondary} text={'IButtonTypes.secondary'} />
        <Button type={IButtonTypes.tertiary} text={'IButtonTypes.tertiary'} />
        <Button type={IButtonTypes.loading} text={'IButtonTypes.loading'} />
        <Button
          type={IButtonTypes.destructive}
          text={'IButtonTypes.destructive'}
        />
        <Button type={IButtonTypes.disabled} text={'IButtonTypes.disabled'} />
      </View>

      <View style={styles.content}>
        <Button size={IButtonSize.fixed} text={'IButtonSize.fixed'} />
        <Button size={IButtonSize.large} text={'IButtonSize.large'} />
        <Button size={IButtonSize.small} text={'IButtonSize.small'} />
      </View>

      <View style={styles.content}>
        <Button
          text={'leftIcon'}
          leftIcon={<SimpleIcon name={'icon-send'} />}
        />
        <Button
          text={'rightIcon'}
          rightIcon={<SimpleIcon name={'icon-send'} />}
        />
        <Button
          text={'both'}
          leftIcon={<SimpleIcon name={'icon-send'} />}
          rightIcon={<SimpleIcon name={'icon-send'} />}
        />
      </View>

      <View style={styles.content}>
        <Button text={'loading'} loading={true} />
        <Button text={'disabled'} disabled={true} />
        <Button text={'both'} disabled={true} loading={true} />
      </View>

      <View style={styles.content}>
        <Button
          text={'increment'}
          count={counter}
          onPress={onChangeCounter(1)}
        />
        <Button
          text={'decrement'}
          count={counter}
          onPress={onChangeCounter(-1)}
        />
      </View>
    </View>
  );
};

const style = createStyles(({spaces}) => ({
  container: {
    gap: spaces.Space4,
  },
  content: {
    alignItems: 'center',
    gap: spaces.Space4,
  },
}));

textProps?: TextProps;

Props

TouchableOpacity Props

Inherits TouchableOpacity Props.

type

TYPE
IButtonTypes

Predefined type for button

size

TYPE
IButtonSize

Predefined type for button

text

TYPE
string

Text of button

textStyle

TYPE
TextStyle

Custom styles for textInputContainer

textProps

TYPE
TextProps

Custom props for text inside button

font

TYPE
TypographyProp

Custom styles for textInputContainer

loading

TYPE
boolean

Loading preset of button

count

TYPE
number

Number of count

leftIcon

TYPE
ReactElement

any react component placed right

rightIcon

TYPE
ReactElement

any react component placed right