Button

Buttons are touchable elements used to interact with the screen display text, icons.

Contents:

  • Button

  • Button Group

View full example: Button Example

Button

import React from 'react';
import { View } from 'react-native';
import { Button } from 'monalisa-ui';

const Example = () => (
  <View>
    <Button
      title="Default"
    />
    <Button
      title="Button transparent"
      transparent
    />
    <Button
      title="Button outline"
      outline
    />
  </View>
);

export default Example;

Configuration

Example

import React from 'react';
import { View } from 'react-native';
import { Button } from 'monalisa-ui';

const Example = () => (
  <View>
    <Button
      title="Raised"
      raised
    />
    <Button
      title="Raised and Outline"
      outline
      raised
    />
     <Button
      title="Loading"
      loading
      outline
    />
    <Button
      title="Disabled"
      disabled
    />
    <Button
      title="Icon"
      iconRight={<Icon name="checkcircleo" color="#fff" size={20} />}
    />
  </View>
);

export default Example;

Button Group

import React from 'react';
import { View, Text } from 'react-native';
import { ButtonGroup } from 'monalisa-ui';

const ButtonGroupItem = () => <Text>ButtonGroupItem</Text>

const Example = () => (
  <View>
    <ButtonGroup
      buttons={['Like', 'Share', 'More']}
      onPress={index => alert(index)}
    />
    <ButtonGroup
      buttons={[{ component: ButtonGroupItem }, { component: ButtonGroupItem }]}
      onPress={index => alert(index)}
    />
  </View>
);

export default Example;

Configuration

Button props...

PreviousBadgeNextCard

Last updated