Buttons
The e-button component covers primary, secondary, and navigation actions. It supports visual variants, sizes, states like disabled/loading, plus icon and link integration. This page helps you compare real usage patterns so you can quickly choose the right setup for visual hierarchy, context, and accessibility.
Usage
Use this playground to tune visual hierarchy with color, outlined, and text; try block for form/mobile layouts; and validate state feedback with disabled and loading.
Button size variants
Set visual scale based on density and priority. Options: x-small, small, default, large, x-large.
Visual variants
Icon mode
With the icon prop you can create compact icon-driven buttons. Recommended for toolbars and frequent actions. You can learn more about how icons work on the Icon Configuration page.
Prepend and append icons
Add visual context by placing icons on the left (prepend) or right (append) side of the label.
Custom size
Adjust dimensions with width and height when the layout requires exact measurements.
Common use cases
Recommended app bar pattern: navigation at the start, brand in the main flow, a tonal primary action for creation, and utility actions grouped at the end.
Props
Complete reference of props, types, and behavior to configure Button precisely.
| Property | Type | Default |
|---|---|---|
| size | "x-small" | "small" | "default" | "large" | "x-large" | "default" (visual fallback) |
Sets button size preset. | ||
| color | string | undefined |
Applies theme color to the button (background/state layers depending on style). | ||
| hoverColor | string | undefined |
Optional color applied while pointer is hovering the button. | ||
| disabled | boolean | false |
Disables interactions and applies disabled styles. | ||
| loading | boolean | false |
Shows the loading indicator and blocks click interactions. | ||
| ripple | boolean | true |
Enables or disables the ripple interaction effect. | ||
| link | boolean | false |
Forces anchor rendering mode when true. | ||
| type | string | "button" (when tag is button) |
Native button type when rendered as <button>. | ||
| ariaLabel | string | undefined |
Explicit aria-label for accessibility, useful for icon-only buttons. | ||
| outlined | boolean | false |
Uses outlined visual style instead of filled background. | ||
| text | boolean | false |
Uses text style with transparent background. | ||
| tonal | boolean | false |
Uses tonal style variant. | ||
| fab | boolean | false |
Enables FAB presentation; combined with icon for icon-centric layout. | ||
| stacked | boolean | false |
Applies stacked layout variant class. | ||
| rounded | boolean | false |
Applies rounded pill corners to the button. | ||
| block | boolean | false |
Expands button width to fill the available horizontal space. | ||
| useContrastColor | boolean | false |
Forces contrast color class strategy for text/outlined-like cases. | ||
| elevation | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "sm" |
Controls elevation level when style supports elevation. | ||
| icon | IconPath | IconPath[] | string | undefined |
Icon payload for button content; supports icon-only behavior when no default slot content exists. | ||
| prependIcon | IconPath | IconPath[] | string | undefined |
Adds an icon before the default slot content. | ||
| appendIcon | IconPath | IconPath[] | string | undefined |
Adds an icon after the default slot content. | ||
| width | number | string | undefined |
Sets explicit button width using number (px) or CSS length string. | ||
| height | number | string | undefined |
Sets explicit button height using number (px) or CSS length string. | ||