Socket
Socket
Sign inDemoInstall

native-x-button

Package Overview
Dependencies
4
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    native-x-button

Tappable button implementation


Version published
Maintainers
1
Install size
63.9 MB
Created

Readme

Source

native-x-button

semantic-release

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 TypesButton SizesColors / Disabled
DEMO1DEMO2DEMO3

API

PropertyDefault ValueUsage
disabled?: booleanfalseDisable the user interaction and change visual appearance
outline?: booleanfalseButton with no background but with border color
clear?: booleanfalseButton with no background and border color
rounded?: booleanfalseShow rounded corners
loading?: booleanfalseShow a spinner
icon?: ReactNodeShow an icon
size?: string'normal'Valid values: 'x-small', 'small', 'normal', 'large', 'x-large'
backgroundColor?: stringCOLOR.ACCENTAny valid name of the color defined by ThemeProvider
textColor?: stringCOLOR.PRIMARYAny valid name of the color defined by ThemeProvider
borderColor?: stringCOLOR.DIVIDERAny valid name of the color defined by ThemeProvider
fill?: booleanFill the container horizontally and vertically
fillHorizontal?: booleanFill the container horizontally
width?: numberWidth of the button
height?: numberHeight of the button
minWidth?: numberMinimum width of the button
minHeight?: numberMinimum height of the button
maxWidth?: numberMaximum width of the button
maxHeight?: numberMaximum height of the button
onTap: (data: TData) => voidAction handler for user interaction
data: TDataundefinedOptional data

Automatic Release

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

Commit messageRelease 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

FAQs

Last updated on 10 Aug 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc