Button

English | 中文

Button component. It supports the following features:

• default, primary, success, warning and danger five themes
• small, default and large three sizes
• square, default and round three shapes
• supports icon buttons and customize icon direction
• supports outline style button
• supports block level button
• supports link style button

How to use

npm install @rn-components-kit/button --save

|Preview|Code| |------------|:---------:| ||Demo1 Code| ||Demo2 Code| ||Demo3 Code| ||Demo4 Code| ||Demo5 Code| ||Demo6 Code| ||Demo7 Code|

Props

• style
• text
• icon
• iconLeft
• type
• size
• shape
• block
• outline
• link

Methods

• updatePreset

Reference

Props

style

Allow you to customize style

|Type|Required|Default| |----|--------|-------| |object|no|-|

text

Text to display in button

|Type|Required|Default| |----|--------|-------| |string|no|-|

icon

Icon to display in button

|Type|Required|Default| |----|--------|-------| |Icon Preset|no|-|

iconLeft

Determines icon's direction in button is left or right

|Type|Required|Default| |----|--------|-------| |boolean|no|true|

type

Button type, determines button's theme

|Type|Required|Default| |----|--------|-------| |enum('default' | 'primary' | 'success' | 'warning' | 'danger' | 'link')|no|'default'|

size

Button size

|Type|Required|Default| |----|--------|-------| |enum('small' | 'default' | 'large')|no|'default'|

shape

Button Shape

|Type|Required|Default| |----|--------|-------| |enum('default' | 'round' | 'square')|no|'default'|

block

Block level button

|Type|Required|Default| |----|--------|-------| |boolean|no|false|

outline

Applies outline button style

|Type|Required|Default| |----|--------|-------| |boolean|no|false|

link

Applies link button style

|Type|Required|Default| |----|--------|-------| |boolean|no|false|

Methods

updatePreset

updatePreset(preset);

This method offers an opportunity to change button presetted style. The preset is:

{
  "theme": {
    "default": "#EFEFEF",
    "primary": "#40A9FF",
    "warning": "#E6A23C",
    "danger": "#D9534F",
    "success": "#67C23A"
  },
  "small": {
    "fontSize": 12,
    "borderRadius": 4,
    "paddingHorizontal": 10,
    "paddingVertical": 5,
    "iconTextSpacing": 5
  },
  "default": {
    "fontSize": 14,
    "borderRadius": 4,
    "paddingHorizontal": 12,
    "paddingVertical": 6,
    "iconTextSpacing": 7
  },
  "large": {
    "fontSize": 18,
    "borderRadius": 4,
    "paddingHorizontal": 16,
    "paddingVertical": 10,
    "iconTextSpacing": 9
  }
}