Skip to content

README.md

Latest commit

 

History

History
100 lines (79 loc) · 2.83 KB

README.md

File metadata and controls

100 lines (79 loc) · 2.83 KB
Raw

Buttons

Regular Buttons

Material 3 expressive buttons.

Changes from previous version:

  • All buttons are a single component now with different attributes.
<div class="flex g12 aic">
  <md-button>Default</md-button>
  <md-button size="extra-small">Extra small</md-button>
  <md-button size="small">Small</md-button>
  <md-button size="medium">Medium</md-button>
  <md-button size="large">Large</md-button>
  <md-button size="extra-large">Extra large</md-button>
</div>
<div class="flex g12 aic">
  <md-button color="elevated">
    <md-icon slot="icon">edit</md-icon>
    Elevated
  </md-button>
  <md-button color="outlined">Outlined</md-button>
  <md-button color="filled">
    <md-icon slot="icon">edit</md-icon>
    Filled
  </md-button>
  <md-button color="tonal">Tonal</md-button>
  <md-button color="text">Text</md-button>
</div>

Button Groups

Material 3 Button Groups

Standard Button Group:

<md-button-group>
  <md-button>One</md-button>
  <md-button>Two</md-button>
  <md-button>Three</md-button>
</md-button-group>

Connected Button Group:

<!-- Single-select connected button group (Material 3 Expressive) -->
<md-button-group connected aria-label="Folders">
  <md-button color="tonal" selected>My files</md-button>
  <md-button color="tonal">Shared</md-button>
  <md-button color="tonal">Computers</md-button>
</md-button-group>

<!-- Connected button group with checkmark on selected button -->
<md-button-group connected checkmark aria-label="Select size">
  <md-button color="tonal" selected>8oz</md-button>
  <md-button color="tonal">12oz</md-button>
  <md-button color="tonal">16oz</md-button>
</md-button-group>

Material 3 Expressive Specification: Connected button groups replace the baseline segmented button. They feature 2px gap, fully round outer corners, and inner corner radii (8px for small/medium, 4px for XS, 16px for L, 20px for XL), with single-select or multi-select toggle coordination. Provide an aria-label attribute on <md-button-group> for accessibility.

Floating Action Button - FAB

Material 3 Floating Action Button]

<md-fab class="fabBottom" variant="primary" href="#">
  <md-icon slot="icon">add</md-icon>
</md-fab>

Extended FAB

Extended

<md-fab class="fabBottom" variant="primary" href="#" label="Extended FAB" extended>
  <md-icon slot="icon">add</md-icon>
</md-fab>

Split Buttons

<md-split-button color="filled">
  Send
  <div slot="menu">
    <!-- define your menu here -->
    <md-menu-item>Schedule send</md-menu-item>
    <md-menu-item>Save template</md-menu-item>
  </div>
</md-split-button>