Tappable button implementation
npm install native-x-button
This helps you add interactive buttons. This module works with native-x-theme package.
``sh`
yarn add native-x-button
`sh`
npm install native-x-button
`tsx
import { Button } from 'native-x-button'
function MyComponent() {
return (
...
...
}>Delete
)
}
``
| Button Types | Button Sizes | Colors / Disabled |
| -------------------------- | -------------------------- | -------------------------- |
| !DEMO1 | !DEMO2 | !DEMO3 |
| 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 |
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 |