V99Button

A component that helps user can make an action

I. Props

Name	Type	Default	Description
text	string	-	Set name for button
onPress	() => void	-	Handle callback when press on button
disabled	boolean	false	If true apple disable style and can't press
opacity	number	0.8	Set opacity when press
type	'filled' | 'outline' | 'textLink'	filled	Set style type of button
buttonSize	'small' | 'medium' | 'large'	medium	Set size of button
rightIcon	IconCDNType	-	Set right icon for button
leftIcon	IconCDNType	-	Set left icon for button

II. Usage

import { V99Button } from 'v99-kits'

III. Button list:

• Button Type: filled | outline | textlink
• Button Size: small | medium | large
• Button Icon: rightIcon | leftIcon

---

1. Button type

Example

      <V99Text T3 margin={V99Spacing.s8}>
        Filled
      </V99Text>
      <V99Box>
        <V99Button text={'V99Button enable'} marginBottom={V99Spacing.s8} />
        <V99Button
          text={'V99Button disable'}
          disabled={true}
          marginBottom={V99Spacing.s8}
        />
      </V99Box>

      <V99Text T3 margin={V99Spacing.s8}>
        Outline
      </V99Text>
      <V99Box>
        <V99Button
          text={'V99Button enable'}
          type={'outline'}
          marginBottom={V99Spacing.s8}
        />
        <V99Button
          text={'V99Button disable'}
          type={'outline'}
          disabled={true}
          marginBottom={V99Spacing.s8}
        />
      </V99Box>

      <V99Text T3 margin={V99Spacing.s8}>
        Textlink
      </V99Text>
      <V99Box>
        <V99Button
          text={'V99Button enable'}
          type={'textLink'}
          marginBottom={V99Spacing.s8}
        />
        <V99Button
          text={'V99Button disable'}
          type={'textLink'}
          disabled={true}
          marginBottom={V99Spacing.s8}
        />
      </V99Box>

Demo

---

2. Button size

Example

      <V99Box fill>
        <V99Button
          text={'V99Button small'}
          buttonSize={'small'}
          marginBottom={V99Spacing.s8}
        />
        <V99Button
          text={'V99Button medium'}
          buttonSize={'medium'}
          marginBottom={V99Spacing.s8}
        />
        <V99Button
          text={'V99Button large'}
          buttonSize={'large'}
          marginBottom={V99Spacing.s8}
        />
      </V99Box>

Demo

3. Button icon

Example

        <V99Button text={'V99Button'} leftIcon={'system_hide'} rightIcon={'system_hide'}/>
        <V99Button text={'V99Button'} type={'outline'} leftIcon={'system_hide'} rightIcon={'system_hide'}/>
        <V99Button text={'V99Button'} type={'outline'} rightIcon={'system_hide'} disabled={true}/>
        <V99Button text={'V99Button'} type={'textLink'} leftIcon={'system_hide'} rightIcon={'system_hide'}/>
        <V99Button text={'V99Button'} type={'textLink'} leftIcon={'system_hide'} disabled={true}/>

Demo