button

A customizable button designed for interactive UI elements. It supports hover, focus, and click animations, and has various configurable appearance properties, including background color, shadow, and border style.

Example

Basic Usage

1<button>
2  <label as_prop="slot" text="'Hello'"></label>
3</button>

Define inner

1<button>
2  <view as_prop="slot">
3    <label text="'Hello'"></label>
4    <label text="'World'"></label>
5  </view>
6</button>

Properties

NameDescriptionType
themeThemeThemes
background_colorBackground colorMakepadColor
background_visibleIs the background visiblebool
hover_colorHover colorMakepadColor
focus_colorFocus colorMakepadColor
shadow_colorShadow colorMakepadColor
spread_radiusShadow spread radiusF32
blur_radiusShadow blur radiusF32
shadow_offsetShadow offsetVec2
border_colorBorder colorMakepadColor
border_widthBorder widthF32
border_radiusBorder radiusF32
cursorMouse pointerMouseCursor
visibleVisible or notbool
grab_key_focusGrab keyboard focus or notbool
animation_keyAnimation keybool
event_keyEvent keybool
abs_posAbsolute positionDVec2
marginMarginMargin
widthWidthSize
heightHeightSize
scrollScroll offsetDVec2
clip_xClip X axis or notbool
clip_yClip Y axis or notbool
paddingPaddingPadding
alignAlignmentAlign
flowFlowFlow
spacingSpacingF64

Event callback

NameDescriptionParameters
hover_inMouse enter eventGButtonHoverParam
hover_outMouse leave eventGButtonHoverParam
clickedClick eventGButtonClickedParam
focusGet focus eventGButtonFocusParam
focus_lostLose focus eventGButtonFocusLostParam