material-inspired-component-library
Version:
The Material-Inspired Component Library (MICL) offers a collection of beautifully crafted components leveraging native HTML markup, designed to align with the Material Design 3 guidelines.
264 lines (259 loc) • 17.4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Demonstrating MICL Buttons">
<title>MICL Buttons</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,edit,home&display=block">
<link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
<link rel="stylesheet" href="micl.css">
<link rel="stylesheet" href="docs.css">
</head>
<body class="micl-window light">
<main class="micl-body micl-body--stacked-to-large">
<section class="micl-pane">
<header class="micl-appbar">
<a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
<span class="material-symbols-outlined" aria-hidden="true">home</span>
</a>
<div class="micl-appbar__headline micl-appbar__headline--center">
<h1>Buttons</h1>
<p class="micl-appbar__subtitle">Showcasing MICL buttons</p>
</div>
<div id="settings-placeholder" class="micl-appbar__trailing"></div>
</header>
<div class="micl-card-filled">
<div class="micl-card__headline-m">
<h2>Text buttons</h2>
</div>
<div class="micl-card__content" style="padding-block:8px 16px">
<button type="button" class="micl-button-text-xs">Click</button>
<button type="button" class="micl-button-text-s">Click</button>
<button type="button" class="micl-button-text-m">Click</button>
<button type="button" class="micl-button-text-l">Click</button>
<button type="button" class="micl-button-text-xl">Click</button>
<p></p>
<button type="button" class="micl-button-text-xs micl-button--square">
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
Click
</button>
<button type="button" class="micl-button-text-s micl-button--square">
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
Click
</button>
<button type="button" class="micl-button-text-m micl-button--square">
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
Click
</button>
<button type="button" class="micl-button-text-l micl-button--square" disabled>
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
Click
</button>
<button type="button" class="micl-button-text-xl micl-button--square">
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
Click
</button>
</div>
</div>
<div class="micl-card-outlined">
<div class="micl-card__headline-m">
<h2>Elevated buttons</h2>
</div>
<div class="micl-card__content" style="padding-block:8px 16px">
<button type="button" class="micl-button-elevated-xs">Click</button>
<button type="button" class="micl-button-elevated-s">Click</button>
<button type="button" class="micl-button-elevated-m">Click</button>
<button type="button" class="micl-button-elevated-l">Click</button>
<button type="button" class="micl-button-elevated-xl">Click</button>
<p></p>
<button type="button" class="micl-button-elevated-xs micl-button--square">
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
<span>Click</span>
</button>
<button type="button" class="micl-button-elevated-s micl-button--square">
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
<span>Click</span>
</button>
<button type="button" class="micl-button-elevated-m micl-button--square">
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
<span>Click</span>
</button>
<button type="button" class="micl-button-elevated-l micl-button--square" disabled>
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
<span>Click</span>
</button>
<button type="button" class="micl-button-elevated-xl micl-button--square">
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
<span>Click</span>
</button>
</div>
</div>
<div class="micl-card-elevated">
<div class="micl-card__headline-m">
<h2>Filled buttons</h2>
</div>
<div class="micl-card__content" style="padding-block:8px 16px">
<button type="button" class="micl-button-filled-xs">Click</button>
<button type="button" class="micl-button-filled-s">Click</button>
<button type="button" class="micl-button-filled-m">Click</button>
<button type="button" class="micl-button-filled-l">Click</button>
<button type="button" class="micl-button-filled-xl">Click</button>
<p></p>
<button type="button" class="micl-button-filled-xs micl-button--square">
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
Click
</button>
<button type="button" class="micl-button-filled-s micl-button--square">
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
Click
</button>
<button type="button" class="micl-button-filled-m micl-button--square">
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
Click
</button>
<button type="button" class="micl-button-filled-l micl-button--square" disabled>
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
Click
</button>
<button type="button" class="micl-button-filled-xl micl-button--square">
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
Click
</button>
</div>
</div>
<div class="micl-card-outlined">
<div class="micl-card__headline-m">
<h2>Tonal buttons</h2>
</div>
<div class="micl-card__content" style="padding-block:8px 16px">
<button type="button" class="micl-button-tonal-xs">Click</button>
<button type="button" class="micl-button-tonal-s">Click</button>
<button type="button" class="micl-button-tonal-m">Click</button>
<button type="button" class="micl-button-tonal-l">Click</button>
<button type="button" class="micl-button-tonal-xl">Click</button>
<p></p>
<button type="button" class="micl-button-tonal-xs micl-button--square">
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
Click
</button>
<button type="button" class="micl-button-tonal-s micl-button--square">
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
Click
</button>
<button type="button" class="micl-button-tonal-m micl-button--square">
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
Click
</button>
<button type="button" class="micl-button-tonal-l micl-button--square" disabled>
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
Click
</button>
<button type="button" class="micl-button-tonal-xl micl-button--square">
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
Click
</button>
</div>
</div>
<div class="micl-card-elevated">
<div class="micl-card__headline-m">
<h2>Outlined buttons</h2>
</div>
<div class="micl-card__content" style="padding-block:8px 16px">
<button type="button" class="micl-button-outlined-xs">Click</button>
<button type="button" class="micl-button-outlined-s">Click</button>
<button type="button" class="micl-button-outlined-m">Click</button>
<button type="button" class="micl-button-outlined-l">Click</button>
<button type="button" class="micl-button-outlined-xl">Click</button>
<p></p>
<button type="button" class="micl-button-outlined-xs micl-button--square">
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
Click
</button>
<button type="button" class="micl-button-outlined-s micl-button--square">
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
Click
</button>
<button type="button" class="micl-button-outlined-m micl-button--square">
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
Click
</button>
<button type="button" class="micl-button-outlined-l micl-button--square" disabled>
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
Click
</button>
<button type="button" class="micl-button-outlined-xl micl-button--square">
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
Click
</button>
</div>
</div>
<div class="micl-card-outlined">
<div class="micl-card__headline-m">
<h2>Toggle buttons</h2>
</div>
<div class="micl-card__content">
<div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
<button type="button" id="btn1" class="micl-button-elevated-m micl-button--toggle" commandfor="btn1" command="--micl-toggle">Click</button>
<button type="button" id="btn2" class="micl-button-elevated-m micl-button--toggle micl-button--selected" commandfor="btn2" command="--micl-toggle">Click</button>
<button type="button" id="btn3" class="micl-button-elevated-m micl-button--square micl-button--toggle" commandfor="btn3" command="--micl-toggle">Click</button>
<button type="button" id="btn4" class="micl-button-elevated-m micl-button--square micl-button--toggle micl-button--selected" commandfor="btn4" command="--micl-toggle">Click</button>
</div>
<div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
<button type="button" id="btn5" class="micl-button-filled-m micl-button--toggle" commandfor="btn5" command="--micl-toggle">
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
Click
</button>
<button type="button" id="btn6" class="micl-button-filled-m micl-button--toggle micl-button--selected" commandfor="btn6" command="--micl-toggle">
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
Click
</button>
<button type="button" id="btn7" class="micl-button-filled-m micl-button--square micl-button--toggle" commandfor="btn7" command="--micl-toggle">
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
Click
</button>
<button type="button" id="btn8" class="micl-button-filled-m micl-button--square micl-button--toggle micl-button--selected" commandfor="btn8" command="--micl-toggle">
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
Click
</button>
</div>
<div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
<button type="button" id="btn9" class="micl-button-tonal-m micl-button--toggle" commandfor="btn9" command="--micl-toggle">Click</button>
<button type="button" id="btn10" class="micl-button-tonal-m micl-button--toggle micl-button--selected" commandfor="btn10" command="--micl-toggle">Click</button>
<button type="button" id="btn11" class="micl-button-tonal-m micl-button--square micl-button--toggle" commandfor="btn11" command="--micl-toggle">Click</button>
<button type="button" id="btn12" class="micl-button-tonal-m micl-button--square micl-button--toggle micl-button--selected" commandfor="btn12" command="--micl-toggle">Click</button>
</div>
<div style="display:flex;flex-wrap:wrap;gap:8px">
<button type="button" id="btn13" class="micl-button-outlined-m micl-button--toggle" commandfor="btn13" command="--micl-toggle">Click</button>
<button type="button" id="btn14" class="micl-button-outlined-m micl-button--toggle micl-button--selected" commandfor="btn14" command="--micl-toggle">Click</button>
<button type="button" id="btn15" class="micl-button-outlined-m micl-button--square micl-button--toggle" commandfor="btn15" command="--micl-toggle">Click</button>
<button type="button" id="btn16" class="micl-button-outlined-m micl-button--square micl-button--toggle micl-button--selected" commandfor="btn16" command="--micl-toggle">Click</button>
</div>
</div>
</div>
</section>
<section class="micl-pane">
<div class="micl-card-filled">
<div class="micl-card__headline-s">
<h2>Code example</h2>
</div>
<div class="micl-card__content docs-code">
<pre tabindex="-1"><code>
<button type="button" class="micl-button-tonal-s">Click</button>
<button type="button" class="micl-button-filled-m micl-button--toggle micl-button--selected">Click</button>
<button type="button" class="micl-button-outlined-xl micl-button--square">
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
Click
</button>
</code></pre>
</div>
</div>
</section>
</main>
<script src="micl.js"></script>
<script src="docs.js"></script>
</body>
</html>