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
Name | Description | Type |
---|
theme | Theme | Themes |
background_color | Background color | MakepadColor |
background_visible | Is the background visible | bool |
hover_color | Hover color | MakepadColor |
focus_color | Focus color | MakepadColor |
shadow_color | Shadow color | MakepadColor |
spread_radius | Shadow spread radius | F32 |
blur_radius | Shadow blur radius | F32 |
shadow_offset | Shadow offset | Vec2 |
border_color | Border color | MakepadColor |
border_width | Border width | F32 |
border_radius | Border radius | F32 |
cursor | Mouse pointer | MouseCursor |
visible | Visible or not | bool |
grab_key_focus | Grab keyboard focus or not | bool |
animation_key | Animation key | bool |
event_key | Event key | bool |
abs_pos | Absolute position | DVec2 |
margin | Margin | Margin |
width | Width | Size |
height | Height | Size |
scroll | Scroll offset | DVec2 |
clip_x | Clip X axis or not | bool |
clip_y | Clip Y axis or not | bool |
padding | Padding | Padding |
align | Alignment | Align |
flow | Flow | Flow |
spacing | Spacing | F64 |
Event callback
Name | Description | Parameters |
---|
hover_in | Mouse enter event | GButtonHoverParam |
hover_out | Mouse leave event | GButtonHoverParam |
clicked | Click event | GButtonClickedParam |
focus | Get focus event | GButtonFocusParam |
focus_lost | Lose focus event | GButtonFocusLostParam |