Buttons

open_in_newmaterial docs

• Can contain an optional leading icon
• Containers have fully rounded corners and are wide enough to fit label text
• Keep labels concise and in sentence-case

Button variants

code

<m-button text="Filled"/>
<m-button text="Tonal" variant="tonal"/>
<m-button text="Outlined" variant="outlined"/>
<m-button text="Text" variant="text"/>

Icons

You can use all icons from Google's material symbols.

code

<m-button text="Go to" append-icon="arrow_forward"/>
<m-button text="Search" variant="tonal" prepend-icon="search"/>

WARNING

Don’t use two icons in the same button, as said in guidelines

Disabled state

You can set disabled state to button, by adding disabled prop

code

<m-button text="Filled" disabled/>
<m-button text="Tonal" variant="tonal" disabled/>
<m-button text="Outlined" variant="outlined" disabled/>
<m-button text="Text" variant="text" disabled/>