Button

Button is one of the most commonly used components, mainly for scenes that need to be clicked, such as plain text, pictures, and buttons.

Code demo

Code examples of Button in the specific scenes are as follows.

Note: for more information, see Button Demo.

Text

import { Button } from "tuya-panel-kit";
 
<Button text="Click me" />;

Icon

import { Button } from "tuya-panel-kit";
 
<Button icon="selected" iconSize={24} text="text" />;

Image

import { Button } from "tuya-panel-kit";
 
<Button image={require("../../res/2.png")} />;

API

Inherit the TouchableOpacity component. For more information, see TouchableOpacity.

stretch

Stretch of the button follows the parent container.

Type	Required	Default value
boolean	No	false

size

Button size.

• noSet: the button is not set, but filled with a child element.
• large: the button is in a large size, 48 px.
• normal: the button is in a normal size, 40 px.
• small: the button is in a small size, 32 px.

Type	Required	Default value
enum/number	No	noSet

type

Button type.

• primary: the button follows global.brand in the theme.
• normal: the default background color is transparent.

Type	Required	Default value
enum	No	normal

text

Button text.

Type	Required	Default value
string	No	None

background

Button background. It can be a color value or gradient value.

Type	Required	Default value
string or object	No	None

textSingleLine

Whether the text in the button is displayed in only one line, that is, the extra part is displayed with the ellipsis.

Type	Required	Default value
boolean	No	true

textDirection

Text arrangement direction in the button. The text is at the bottom of the button by default.

• left: the text is on the left.
• top: the text is at the top.
• right: the text is on the right.
• bottom: the text is at the bottom.
• center: the text is in the center.

Type	Required	Default value
enum	No	bottom

icon

The button icon ID. See iconfont-name attribute.

iconPath

The button icon path. See iconfont-d attribute.

iconSize

The button icon size. See iconfont-size.

iconColor

The button icon color. See iconfont-color attribute.

image

The source picture of the button.

Type	Required	Default value
Image.propTypes.source	No	None

imageColor

The tintColor of the button picture.

Type	Required	Default value
string	No	None

imageStyle

The image style in the button.

Type	Required	Default value
ViewPropTypes.style	No	None

activeOpacity

Transparency when the button is clicked.

Type	Required	Default value
number (0 to 1)	No	0.5

disabled

Whether the button is disabled.

Type	Required	Default value
boolean	No	false

disabledOpacity

Transparency when the button is disabled.

Type	Required	Default value
number (0 to 1)	No	0.2

style

Button style.

Type	Required	Default value
ViewPropTypes.style	No	None

wrApperStyle

The outermost container style of the button.

Type	Required	Default value
ViewPropTypes.style	No	None

textStyle

Button text style.

Type	Required	Default value
Text.propTypes.style	No	None

badgeStyle

Badge style.

Type	Required	Default value
ViewPropTypes.style	No	None

badgeTextStyle

Badge text style.

Type	Required	Default value
Text.propTypes.style	No	None

onPress

Click callback.

Type	Required	Default value
() => {}	No	None

onLayout

Button onLayout callback.

Type	Required	Default value
(e) => {}	No	None