Usage
import { Button } from '@smartacteam/react-native-ui';
<Button variant="secondary">{children}</Button> // OR <Button variant="secondary" label="Button" />
Basics
Buttons should follow these principles:
- Identifiable - Buttons should indicate that they can trigger an action.
- Findable - Buttons should be easy to find among other elements.
- Clear - Button’s action and state should be clear.
Example
Props
| Name | Type | Required | Description |
|---|---|---|---|
children | React.ReactNode | No | Content rendered inside the button. |
label | string | No | Shortcut text label (alternative to children). |
form | reset or submit | No | Button action type, used in Form |
leftIcon | IconName | No | The icon prop must be one of icons |
rightIcon | IconName | No | The icon prop must be one of icons |
textStyle | TextStyle | No | Custom style for the label text. |
variant | 'primary' | 'secondary' | 'confirmation' | 'warning' | 'destructive' | 'ghost' | No | Visual style of the button. |
size_* | boolean | No | Size variants like size_sm, size_md, size_lg, etc., based on SizeScale. |
label_* | BaseSmacTextStyling | No | Text style overrides for the label, e.g. label_fontSize, label_fontWeight. |
| (…) | (Inherited) | Props from BaseSmacStyling, TouchableOpacityProps. |
ℹ️ Use
size_*for button sizing andlabel_*to fine-tune label text styles.
SeeBaseSmacStylingand React Native TouchableOpacity Props for inherited options.