Button

Button component with Pressable as container, and supports full customization with different props. It has both hover and press effect that get picked from the color shades or if custom color is provided it auto generates those colors.

Usage

Blossom Button

function ButtonUsage() {
  return (
    <View>
      <Button onPress={() => alert('You are Awesome')}>Blossom Button</Button>
    </View>
  )
}

Status

primary

accent

success

info

warning

error

function ButtonStatuses() {
  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <Button status="primary">primary</Button>
      <Button status="accent">accent</Button>
      <Button status="success">success</Button>
      <Button status="info">info</Button>
      <Button status="warning">warning</Button>
      <Button status="error">error</Button>
    </View>
  )
}

Size

small

medium

large

function ButtonSizes() {
  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <Button size="small" title="small" />
      <Button size="medium" title="medium" />
      <Button size="large" title="large" />
    </View>
  )
}

Modes

filled

tinted

outlined

plain

function ButtonModes() {
  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <Button mode="filled" title="filled" />
      <Button mode="tinted" title="tinted" />
      <Button mode="outlined" title="outlined" />
      <Button mode="plain" title="plain" />
    </View>
  )
}

Disabled

filled

tinted

outlined

plain

function ButtonDisabled() {
  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <Button disabled mode="filled">
        filled
      </Button>
      <Button disabled mode="tinted">
        tinted
      </Button>
      <Button disabled mode="outlined">
        outlined
      </Button>
      <Button disabled mode="plain">
        plain
      </Button>
    </View>
  )
}

Loading

When isLoading enabled, Button doesn't show the hover & press effect same as the disabled state to indicate that user can't do any action here. The loading icon is set to left by default. The loader color is set to same as the text color by default, it can be changed with loaderProps.

small

medium

large

function ButtonLoading() {
  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <Button isLoading size="small">
        small
      </Button>
      <Button isLoading size="medium">
        medium
      </Button>
      <Button isLoading size="large">
        large
      </Button>
    </View>
  )
}

Icons

You can use both the left/right props for left/right icons, it comes with default standard padding.



filled



tinted



outlined





plain



function ButtonIcons() {
  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <Button mode="filled" left={<Icon name="add" size={24} color="white" />}>
        filled
      </Button>
      <Button
        mode="tinted"
        left={<Icon name="add" size={24} />}
        right={<Icon name="arrow-forward-outline" size={24} />}>
        tinted
      </Button>
      <Button
        mode="outlined"
        right={
          <Icon name="arrow-forward-outline" size={24} status="primary" />
        }>
        outlined
      </Button>
      <Button
        mode="plain"
        left={<Icon name="add" size={24} />}
        right={<Icon name="arrow-forward-outline" size={24} />}>
        plain
      </Button>
    </View>
  )
}

Modes and Sizes

filled small

filled medium

filled large

tinted small

tinted medium

tinted large

outlined small

outlined medium

outlined large

plain small

plain medium

plain large

Custom Buttons



Prefix Text Children Suffix





Icons Space-Between



Loading...

function ButtonCustom() {
  return (
    <View style={{justifyContent: 'space-evenly'}}>
      <Button
        loaderProps={{
          color: 'black',
        }}
        isLoading
        left={<Icon name="add" size={24} color="white" />}
        right={<Icon name="add" size={24} color="white" />}
        style={[{width: '100%', backgroundColor: 'green'}]}
        onPress={() => alert('Awesome Blossom Button')}>
        Prefix <Text status="error">Text Children</Text> Suffix
      </Button>
      <Button
        style={[{justifyContent: 'space-between', width: '100%'}]}
        left={<Icon name="add" size={24} color="white" />}
        right={<Icon name="add" size={24} color="white" />}>
        Icons Space-Between
      </Button>

      <Button isLoading>Loading...</Button>
    </View>
  )
}

const MODES: ButtonProps['mode'][] = ['filled', 'tinted', 'outlined', 'plain']

Props

Prop	Data Type	Default Value	Description
Extends	PressableProps	--	Inherits properties from PressableProps
mode	ButtonMode	filled	Change the appearance of the button using this
title	string	--	Button title text
titleStyle	StyleProp<TextStyle>	--	Title text style
style	StyleProp<ViewStyle>	--	Button style to add padding/margin etc.
isLoading	boolean	--	Set it to true to show the activity indicator to the left
disabled	boolean	--	Set to true to disable the button
left	ReactNode	--	Render any icon/JSX on left of the title
right	ReactNode	--	Render any icon/JSX on right of the title
loaderProps	ActivityIndicatorProps	--	Loader props
status	BlossomStatus	primary	--
size	BlossomSize	medium	--