@rn-components-kit/button

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