Button

Last Updated on : 2023-10-12 08:00:16download

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