@rn-components-kit/button v1.0.0

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

Props

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

Methods

• updatePreset

Reference

Props

style

Allow you to customize style

text

Text to display in button

icon

Icon to display in button

iconLeft

Determines icon's direction in button is left or right

type

Button type, determines button's theme

size

Button size

shape

Button Shape

block

Block level button

outline

Applies outline button style

link

Applies link button style

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
  }
}