Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
native-x-button
Advanced tools
This helps you add interactive buttons. This module works with native-x-theme
package.
yarn add native-x-button
npm install native-x-button
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>
)
}
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 |
FAQs
Tappable button implementation
The npm package native-x-button receives a total of 77 weekly downloads. As such, native-x-button popularity was classified as not popular.
We found that native-x-button demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.