native-x-button

This helps you add interactive buttons. This module works with native-x-theme package.

Install

Yarn

yarn add native-x-button

NPM

npm install native-x-button

Usage

import { Button } from 'native-x-button'

function MyComponent() {
  return (
    <Stack>
      <Button>Click Me</Button>
      <Button outline>Click Me</Button>
      <Button clear>Click Me</Button>
      ...
      <Button rounded>Click Me</Button>
      <Button rounded outline>
        Click Me
      </Button>
      ...
      <Button loading>Click Me</Button>
      <Button rounded loading>
        Click Me
      </Button>
      <Button icon={<Icon name='trash' />}>Delete</Button>
    </Stack>
  )
}

DEMO

| Button Types | Button Sizes | Colors / Disabled | | -------------------------- | -------------------------- | -------------------------- | | | | |

API

| Property | Default Value | Usage | | ---------------------------- | ------------- | -------------------------------------------------------------- | | disabled?: boolean | false | Disable the user interaction and change visual appearance | | outline?: boolean | false | Button with no background but with border color | | clear?: boolean | false | Button with no background and border color | | rounded?: boolean | false | Show rounded corners | | loading?: boolean | false | Show a spinner | | icon?: ReactNode | | Show an icon | | size?: string | 'normal' | Valid values: 'x-small', 'small', 'normal', 'large', 'x-large' | | backgroundColor?: string | COLOR.ACCENT | Any valid name of the color defined by ThemeProvider | | textColor?: string | COLOR.PRIMARY | Any valid name of the color defined by ThemeProvider | | borderColor?: string | COLOR.DIVIDER | Any valid name of the color defined by ThemeProvider | | fill?: boolean | | Fill the container horizontally and vertically | | fillHorizontal?: boolean | | Fill the container horizontally | | width?: number | | Width of the button | | height?: number | | Height of the button | | minWidth?: number | | Minimum width of the button | | minHeight?: number | | Minimum height of the button | | maxWidth?: number | | Maximum width of the button | | maxHeight?: number | | Maximum height of the button | | onTap: (data: TData) => void | | Action handler for user interaction | | data: TData | undefined | Optional data |

Automatic Release

Here is an example of the release type that will be done based on a commit messages:

| Commit message | Release type | | ------------------- | --------------------- | | fix: [comment] | Patch Release | | feat: [comment] | Minor Feature Release | | perf: [comment] | Major Feature Release | | doc: [comment] | No Release | | refactor: [comment] | No Release | | chore: [comment] | No Release |