Skip to content

ButtonItem

ButtonItem Properties

Property Type Required Default
Alignment enum Optional "Center"
ButtonType enum Optional "Text"
FullWidth boolean Optional false
Image Image Optional
ImagePosition enum Optional "Leading"
ImageSize ImageSize Optional
OnPress complex Optional
Semantic enum Optional "Tint"
Style string Optional
Styles object Optional
TextAlignment enum Optional "Center"
Title string Optional
Visible boolean Optional true
_Name string Optional

Alignment

Content of alignment of the button, will be ignored if layout type is horizontal

  • type: enum
  • default: "Center"

The value of this property must be equal to one of the known values below.

Alignment Known Values

Value Description
Left
Right
Center

ButtonType

The important types of the button.

  • type: enum
  • default: Text

The value of this property must be equal to one of the known values below.

Value Description
Primary Emphasize the most important actions.
Secondary Less emphasis but still require users's attention.
Text Less important actions users can take.

FullWidth

Sets the full width of the button, will be ignored if layout type is horizontal

  • type: boolean
  • default: false

Image

The image to be displayed along with the title.


ImagePosition

Position of the image to be displayed along with the title

  • type: enum
  • default: "Leading"

The value of this property must be equal to one of the known values below.

ImagePosition Known Values

Value Description
Leading
Trailing

ImageSize

Size of the image to be displayed along with the title


OnPress

Action or rule to be performed when the event is triggered.

  • type: complex

OnPress Value

Any following options needs to be fulfilled.

Option 1

Option 2


Semantic

Use the semantic buttons for positive and negative actions.

  • type: enum
  • default: Tint

The value of this property must be equal to one of the known values below.

Value Description
Normal Use it for neutral actions, e.g. Back / Cancel.
Tint Use it for positive actions, e.g. Update / Add / Approve.
Negative Use it for negative actions, e.g. Delete / Reset / Reject.

Style

[Deprecated. Use Styles instead.] The string value is a style class name for Button.

  • type: string

Styles

Set styles for button.

  • type: object with following properties.
Property Type Required Default
Image string Optional
Button string Optional

Image

The string value is a style class name for Image. It is applicable only to SAP icon or font icon types (Supported CSS properties are font-size and color).

Button

The string value is a style class name for Button.


TextAlignment

[Deprecated. Use Alignment instead.] Text alignment of the button

  • type: enum
  • default: "Center"

The value of this property must be equal to one of the known values below.

TextAlignment Known Values

Value Description
Left
Right
Center

Title

Label to be displayed on the button. For Android, the text is always in upper case and cannot be styled to contain lower case letters.

  • type: string

Visible

Set the visibility of the button.

  • type: boolean
  • default: true

_Name

  • type: string