Button
A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.
import { Button } from '@redshank/native';
How to use
In @redshank we provide 4 types of button ready for use.
- solid
- flat
- link
- outline
Examples
Default
You can display an button
Shape
You can display two shape
Outline
Outline variant
Flat
Flat variant
Link
Link variant
Shadow
Shadow property
Icon
Icon, Prefix and Suffix property
APIs
Button Props
Api props extends from Touchable
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| Component | Component | React Component | Change the element base | Ripple |
| borderRadius | number | number | Defined border radius in components | 8 or 20 |
| children | string ReactNode | any | Accessory as a child for the component | - |
| color | ThemeColor string | ThemeColor | Change icon color | primrary |
| contentStyle | object | StyleProp<ViewStyle> | Style for wrapper text | - |
| disableRipple | boolean | true false | Disable ripple animation effect | false |
| disableTransform | boolean | true false | Disable transform scale animation effect | false |
| disabled | boolean | true false | Disable element, prevent click in element | false |
| fullWidth | boolean | true false | The button gets the width of 100% of the container | true |
| icon | ReactNode | ReactNode | The prefix icon for the element | - |
| loading | boolean | true false | Show loading state for the button | false |
| prefix | ReactNode | ReactNode | The prefix icon for the element, related to icon prop | - |
| shadow | boolean | true false | Show shadow effect in the button | false |
| shape | Enum | circle round | Border type between circle or rounded | round |
| size | ButtonSize | ButtonSize | Size element for show | middle |
| style | object | StyleProp<ViewStyle> | Style button wrapper | - |
| suffix | ReactNode | ReactNode | Show icon on the other side of the button | - |
| suffixOrPrefixStyle | object | StyleProp<ViewStyle> | Style for prefix or suffix element | - |
| textAlign | object | left center right | Position of the children | center |
| textColor | ThemeColor | ThemeColor | Color for the text of the button | automatic white or black |
| textProps | object | TextProps | Text accessories props | - |
| textStyle | StyleProp<TextStyle> | TextStyle | Text style | - |
| type | ButtonType | ButtonType | Button variant type | solid |
| withMarginBottom | boolean | true false | Margin bottom in the element for separate views | false |
| Other Props | any | Other props | Interactive props for element | - |
Base Properties
type BaseProperties = {
onBlur?: ((e: NativeSyntheticEvent<TargetedEvent>) => void) | undefined;
onFocus?: ((e: NativeSyntheticEvent<TargetedEvent>) => void) | undefined;
onLayout?: ((event: LayoutChangeEvent) => void) | undefined;
onLongPress?: ((event: GestureResponderEvent) => void) | undefined;
onPress?: ((event: GestureResponderEvent) => void) | undefined;
onPressIn?: ((event: GestureResponderEvent) => void) | undefined;
onPressOut?: ((event: GestureResponderEvent) => void) | undefined;
};
Size Type
type ButtonSize = 'small' | 'middle' | 'large' | 'xLarge'
Button Type
type ButtonType = 'solid' | 'link' | 'flat' | 'outline'
Community:
We're excited to see the community adopt @redshank/native, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!
DiscordGithubContributing:
PR's on @redshank/native are always welcome, please see our contribution guidelines to learn how you can contribute to this project.