ButtonBase
ButtonBase is a generic component that provides a foundation for building all sorts of buttons. It can be used as a standalone component, or as the base for other button-like components.
Derived components:
Import
import { ButtonBase } from '@nomada-sh/react-native-eyecandy';
Example
Props
Pressable Props
Inherits Pressable Props.
style
These styles will be applied to the container view.
| Type |
|---|
| View Style |
pressableStyle
These styles will be applied to the pressable view.
| Type |
|---|
| View Style |
styles
This styles are applied before pressableStyle and style.
| Type |
|---|
| object |
Properties
| Name | Type | Required | Description |
|---|---|---|---|
container | View Style | No | These styles will be applied to the container view. |
pressable | View Style | No | These styles will be applied to the pressable view. |
color
This defines the background and foreground colors of the button. The color will change based on the theme (dark or light) if set to 'default'.
| Type | Default |
|---|---|
'default' or 'primary' or 'secondary' | 'default' |
inverse
If true, inverts the background and foreground colors set with the color prop.
| Type | Default |
|---|---|
| boolean | false |
variant
This defines the variant, or look, of the component to use.
Possible values:
'default'adds squared corners to the button.'rounded'adds rounded corners to the button.'squared'adds squared corners to the button.
| Type | Default |
|---|---|
'default' or 'rounded' or 'squared' | 'default' |
fullWidth
If set to true, the button will expand to fill the width of its container.
| Type | Default |
|---|---|
| boolean | true |
height
This defines the height of the button.
| Type | Default |
|---|---|
| number | 56 |
transparent
If true, the background color set with the color prop will be transparent.
| Type | Default |
|---|---|
| boolean | false |
outlined
If true, adds a border of the same color as the foreground color set with the color prop.
| Type | Default |
|---|---|
| boolean | false |
loading
If true, shows a loading spinner on top of button content.
| Type | Default |
|---|---|
| boolean | false |
hideDisabledOverlay
If true, the disabled overlay will not be shown on the button when disabled.
| Type | Default |
|---|---|
| boolean | false |
disableHapticFeedback
If true, the button will not trigger a haptic feedback on press.
| Type | Default |
|---|---|
| boolean | false |
marginTop
| Type |
|---|
| number |
marginBottom
| Type |
|---|
| number |