Class Button

A themed button that can contain text and an icon.

Inheritance

BaseButton

Control

CanvasItem

Node

Object

Button

Derived

CheckBox

CheckButton

ColorPickerButton

MenuButton

OptionButton

Remarks

Button is the standard themed button. It can contain text and an icon, and it will display them according to the current Theme.

Example: Create a button and connect a method that will be called when the button is pressed:

• gdscript
• C#

func _ready():
    var button = Button.new()
    button.text = "Click me"
    button.pressed.connect(_button_pressed)
    add_child(button)

func _button_pressed():
    print("Hello world!")

See also BaseButton which contains common properties and methods associated with this node.

Note: Buttons do not detect touch input and therefore don't support multitouch, since mouse emulation can only press one button at a given time. Use TouchScreenButton for buttons that trigger gameplay movement or actions.

See Also

2D Dodge The Creeps Demo

Operating System Testing Demo

Properties

alignment

Text alignment policy for the button's text, use one of the HorizontalAlignment constants.

var alignment : int = 1

Property Value

int

Remarks

• void set_text_alignment(int value)
• int get_text_alignment

autowrap_mode

If set to something other than TextServer.AUTOWRAP_OFF, the text gets wrapped inside the node's bounding rectangle.

var autowrap_mode : int = 0

Property Value

int

Remarks

• void set_autowrap_mode(int value)
• int get_autowrap_mode

clip_text

If true, text that is too large to fit the button is clipped horizontally. If false, the button will always be wide enough to hold the text. The text is not vertically clipped, and the button's height is not affected by this property.

var clip_text : bool = false

Property Value

bool

Remarks

• void set_clip_text(bool value)
• bool get_clip_text

expand_icon

When enabled, the button's icon will expand/shrink to fit the button's size while keeping its aspect. See also icon_max_width.

var expand_icon : bool = false

Property Value

bool

Remarks

• void set_expand_icon(bool value)
• bool is_expand_icon

flat

Flat buttons don't display decoration.

var flat : bool = false

Property Value

bool

Remarks

• void set_flat(bool value)
• bool is_flat

icon

Theme Property

Default icon for the Button. Appears only if icon is not assigned.

Texture2D icon

Property Value

Texture2D

icon_alignment

Specifies if the icon should be aligned horizontally to the left, right, or center of a button. Uses the same HorizontalAlignment constants as the text alignment. If centered horizontally and vertically, text will draw on top of the icon.

var icon_alignment : int = 0

Property Value

int

Remarks

• void set_icon_alignment(int value)
• int get_icon_alignment

language

Language code used for line-breaking and text shaping algorithms, if left empty current locale is used instead.

var language : String = ""

Property Value

String

Remarks

• void set_language(String value)
• String get_language

text

The button's text that will be displayed inside the button's area.

var text : String = ""

Property Value

String

Remarks

• void set_text(String value)
• String get_text

text_direction

Base text writing direction.

var text_direction : int = 0

Property Value

int

Remarks

• void set_text_direction(int value)
• int get_text_direction

text_overrun_behavior

Sets the clipping behavior when the text exceeds the node's bounding rectangle. See OverrunBehavior for a description of all modes.

var text_overrun_behavior : int = 0

Property Value

int

Remarks

• void set_text_overrun_behavior(int value)
• int get_text_overrun_behavior

vertical_icon_alignment

Specifies if the icon should be aligned vertically to the top, bottom, or center of a button. Uses the same VerticalAlignment constants as the text alignment. If centered horizontally and vertically, text will draw on top of the icon.

var vertical_icon_alignment : int = 1

Property Value

int

Remarks

• void set_vertical_icon_alignment(int value)
• int get_vertical_icon_alignment

font_color

Theme Property

Default text Color of the Button.

 = ``Color(0.875, 0.875, 0.875, 1)``

Property Value

Color

font_disabled_color

Theme Property

Text Color used when the Button is disabled.

 = ``Color(0.875, 0.875, 0.875, 0.5)``

Property Value

Color

font_focus_color

Theme Property

Text Color used when the Button is focused. Only replaces the normal text color of the button. Disabled, hovered, and pressed states take precedence over this color.

 = ``Color(0.95, 0.95, 0.95, 1)``

Property Value

Color

font_hover_color

Theme Property

Text Color used when the Button is being hovered.

 = ``Color(0.95, 0.95, 0.95, 1)``

Property Value

Color

font_hover_pressed_color

Theme Property

Text Color used when the Button is being hovered and pressed.

 = ``Color(1, 1, 1, 1)``

Property Value

Color

font_outline_color

Theme Property

The tint of text outline of the Button.

 = ``Color(0, 0, 0, 1)``

Property Value

Color

font_pressed_color

Theme Property

Text Color used when the Button is being pressed.

 = ``Color(1, 1, 1, 1)``

Property Value

Color

icon_disabled_color

Theme Property

Icon modulate Color used when the Button is disabled.

 = ``Color(1, 1, 1, 0.4)``

Property Value

Color

icon_focus_color

Theme Property

Icon modulate Color used when the Button is focused. Only replaces the normal modulate color of the button. Disabled, hovered, and pressed states take precedence over this color.

 = ``Color(1, 1, 1, 1)``

Property Value

Color

icon_hover_color

Theme Property

Icon modulate Color used when the Button is being hovered.

 = ``Color(1, 1, 1, 1)``

Property Value

Color

icon_hover_pressed_color

Theme Property

Icon modulate Color used when the Button is being hovered and pressed.

 = ``Color(1, 1, 1, 1)``

Property Value

Color

icon_normal_color

Theme Property

Default icon modulate Color of the Button.

 = ``Color(1, 1, 1, 1)``

Property Value

Color

icon_pressed_color

Theme Property

Icon modulate Color used when the Button is being pressed.

 = ``Color(1, 1, 1, 1)``

Property Value

Color

align_to_largest_stylebox

Theme Property

This constant acts as a boolean. If true, the minimum size of the button and text/icon alignment is always based on the largest stylebox margins, otherwise it's based on the current button state stylebox margins.

 = ``0``

Property Value

int

h_separation

Theme Property

The horizontal space between Button's icon and text. Negative values will be treated as 0 when used.

 = ``4``

Property Value

int

icon_max_width

Theme Property

The maximum allowed width of the Button's icon. This limit is applied on top of the default size of the icon, or its expanded size if expand_icon is true. The height is adjusted according to the icon's ratio. If the button has additional icons (e.g. CheckBox), they will also be limited.

 = ``0``

Property Value

int

line_spacing

Theme Property

Additional vertical spacing between lines (in pixels), spacing is added to line descent. This value can be negative.

 = ``0``

Property Value

int

outline_size

Theme Property

The size of the text outline.

Note: If using a font with multichannel_signed_distance_field enabled, its msdf_pixel_range must be set to at least twice the value of outline_size for outline rendering to look correct. Otherwise, the outline may appear to be cut off earlier than intended.

 = ``0``

Property Value

int

font

Theme Property

Font of the Button's text.

Font font

Property Value

Font

font_size

Theme Property

Font size of the Button's text.

int font_size

Property Value

int

icon

Theme Property

Default icon for the Button. Appears only if icon is not assigned.

Texture2D icon

Property Value

Texture2D

disabled

Theme Property

StyleBox used when the Button is disabled.

StyleBox disabled

Property Value

StyleBox

disabled_mirrored

Theme Property

StyleBox used when the Button is disabled (for right-to-left layouts).

StyleBox disabled_mirrored

Property Value

StyleBox

focus

Theme Property

StyleBox used when the Button is focused. The focus StyleBox is displayed over the base StyleBox, so a partially transparent StyleBox should be used to ensure the base StyleBox remains visible. A StyleBox that represents an outline or an underline works well for this purpose. To disable the focus visual effect, assign a StyleBoxEmpty resource. Note that disabling the focus visual effect will harm keyboard/controller navigation usability, so this is not recommended for accessibility reasons.

StyleBox focus

Property Value

StyleBox

hover

Theme Property

StyleBox used when the Button is being hovered.

StyleBox hover

Property Value

StyleBox

hover_mirrored

Theme Property

StyleBox used when the Button is being hovered (for right-to-left layouts).

StyleBox hover_mirrored

Property Value

StyleBox

hover_pressed

Theme Property

StyleBox used when the Button is being pressed and hovered at the same time.

StyleBox hover_pressed

Property Value

StyleBox

hover_pressed_mirrored

Theme Property

StyleBox used when the Button is being pressed and hovered at the same time (for right-to-left layouts).

StyleBox hover_pressed_mirrored

Property Value

StyleBox

normal

Theme Property

Default StyleBox for the Button.

StyleBox normal

Property Value

StyleBox

normal_mirrored

Theme Property

Default StyleBox for the Button (for right-to-left layouts).

StyleBox normal_mirrored

Property Value

StyleBox

pressed

Theme Property

StyleBox used when the Button is being pressed.

StyleBox pressed

Property Value

StyleBox

pressed_mirrored

Theme Property

StyleBox used when the Button is being pressed (for right-to-left layouts).

StyleBox pressed_mirrored

Property Value

StyleBox