Button

• Material Design
• WAI-ARIA

import '@vollowx/seele/m3/button/common-button.js';
import '@vollowx/seele/m3/button/common-button-toggle.js';
import '@vollowx/seele/m3/button/common-button-link.js';

<md-button trailing-icon size="xs" variant="tonal">
  <iconify-icon icon="material-symbols:more-vert" slot="icon"></iconify-icon>
  Extra small
</md-button>

<md-button-toggle size="m" variant="filled">
  <span>Unselected</span>
  <span slot="checked">Selected</span>
</md-button-toggle>
<md-button-toggle size="m" variant="filled" checked>
  <span>Unselected</span>
  <span slot="checked">Selected</span>
</md-button-toggle>

<br /><br />
<md-button size="m" variant="outlined">Round</md-button>
<md-button square size="m" variant="outlined">Square</md-button>

<br /><br />
<md-button-link href="https://m3.material.io/" target="_blank">
  <iconify-icon icon="material-symbols:open-in-new" slot="icon"></iconify-icon>
  Material Design
</md-button-link>

Native or JavaScript link

It's of your own choice whether to use md-button-link for a native anchor element or to just bind methods in JS to the click event of a regular md-button. The former can benefit from the additional features provided by the browser, like copying link from the context menu, and can be used without JS enabled when SSR'd; the latter is smaller in size.

<md-button-link href="https://m3.material.io/">
  <md-icon slot="icon">open-in-new</md-icon>
  Material Design
</md-button-link>

<!-- window.location -->
<md-button onclick="location = 'https://m3.material.io/'">
  <md-icon slot="icon">open-in-new</md-icon>
  Material Design
</md-button>

<!-- Navigation API, requires Firefox 147 or higher -->
<md-button onclick="navigation.navigate('https://m3.material.io/')">
  <md-icon slot="icon">open-in-new</md-icon>
  Material Design
</md-button>

M3Button, M3ButtonToggle and M3ButtonLink

• M3Button inherits Button
• M3ButtonToggle inherits M3Button
• M3ButtonToggle mixes ButtonToggleMixin
• M3ButtonLink inherits Anchor

Slots

CSS Parts

Properties