npm - @ippon-ui/styles - Versions diffs - 0.0.2 - Mend

@ippon-ui/styles 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (618) hide show

package/dist/atom/atom.html ADDED Viewed

@@ -0,0 +1,1466 @@
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Tikui - Atoms</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="description" content="Tikui is a Pattern Library generator."><link rel="stylesheet" href="../documentation/style.css"><link rel="stylesheet" href="../documentation/lib/@fontsource/montserrat/index.css"><link rel="stylesheet" href="../documentation/lib/@fontsource/montserrat/700.css"><link rel="stylesheet" href="../lib/prismjs/prism-okaidia.css"></head><body><div class="tikui-template-page"><div class="tikui-template-page--header"><div class="tikui-template-page--header-container"><header class="tikui-header"><div class="tikui-header--slot"><a class="tikui-title-brand" href="../index.html">Tikui</a></div><div class="tikui-header--slot"><nav><ul class="tikui-header-navigation"><li class="tikui-header-navigation--slot"><a class="tikui-header-item" href="../token/token.html"><span class="tikui-header-item--text">Tokens</span><span class="tikui-header-item--feedback"></span></a></li><li class="tikui-header-navigation--slot"><a class="tikui-header-item -selected" href="../atom/atom.html"><span class="tikui-header-item--text">Atoms</span><span class="tikui-header-item--feedback"></span></a></li><li class="tikui-header-navigation--slot"><a class="tikui-header-item" href="../molecule/molecule.html"><span class="tikui-header-item--text">Molecules</span><span class="tikui-header-item--feedback"></span></a></li><li class="tikui-header-navigation--slot"><a class="tikui-header-item" href="../organism/organism.html"><span class="tikui-header-item--text">Organisms</span><span class="tikui-header-item--feedback"></span></a></li><li class="tikui-header-navigation--slot"><a class="tikui-header-item" href="../template/template.html"><span class="tikui-header-item--text">Templates</span><span class="tikui-header-item--feedback"></span></a></li></ul></nav></div></header></div></div><div class="tikui-template-page--body" data-navigable><div class="tikui-template-page--container"><div class="tikui-template-page--container-content"><div class="tikui-vertical-spacing -s32"><div class="tikui-vertical-spacing--line"><h1 class="tikui-title-main" id="atoms">Atoms</h1></div><div class="tikui-vertical-spacing--line"><figure class="tikui-quote"><blockquote class="tikui-quote--text" cite="http://bradfrost.com/blog/post/atomic-web-design/#atoms"><p>Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.</p><p>Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations.</p></blockquote><figcaption class="tikui-quote--author"><cite>Atomic Design</cite> by Brad Frost</figcaption></figure></div><div class="tikui-vertical-spacing--line"><div class="tikui-component"><div class="tikui-component--markdown markdown"><h2 id="badge">Badge</h2></div><div class="tikui-component--render render"><iframe class="doc-iframe" src="../atom/badge/badge.render.html" height="620" title="Component rendering"></iframe></div><div class="tikui-component--code code"><div class="tikui-line-section -s24"><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-html">&lt;span class=&quot;ippon-badge&quot;&gt;primary&lt;/span&gt;&lt;span class=&quot;ippon-badge&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary icon left&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge&quot;&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge&quot;&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-alert-circle-outline&quot;&gt;&lt;/button&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary clickable&lt;/span&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-close-outline&quot;&gt;&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary&quot;&gt;secondary&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary icon left&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary&quot;&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary&quot;&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-alert-circle-outline&quot;&gt;&lt;/button&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary clickable&lt;/span&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-close-outline&quot;&gt;&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -neutral&quot;&gt;primary (neutral)&lt;/span&gt;&lt;span class=&quot;ippon-badge -neutral&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (neutral) icon left&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -neutral&quot;&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (neutral) icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -neutral&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (neutral) icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -neutral&quot;&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-alert-circle-outline&quot;&gt;&lt;/button&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (neutral) clickable&lt;/span&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-close-outline&quot;&gt;&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -neutral&quot;&gt;secondary (neutral)&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -neutral&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (neutral) icon left&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -neutral&quot;&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (neutral) icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -neutral&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (neutral) icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -neutral&quot;&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-alert-circle-outline&quot;&gt;&lt;/button&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (neutral) clickable&lt;/span&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-close-outline&quot;&gt;&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -success&quot;&gt;primary (success)&lt;/span&gt;&lt;span class=&quot;ippon-badge -success&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (success) icon left&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -success&quot;&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (success) icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -success&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (success) icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -success&quot;&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-alert-circle-outline&quot;&gt;&lt;/button&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (success) clickable&lt;/span&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-close-outline&quot;&gt;&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -success&quot;&gt;secondary (success)&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -success&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (success) icon left&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -success&quot;&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (success) icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -success&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (success) icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -success&quot;&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-alert-circle-outline&quot;&gt;&lt;/button&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (success) clickable&lt;/span&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-close-outline&quot;&gt;&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -error&quot;&gt;primary (error)&lt;/span&gt;&lt;span class=&quot;ippon-badge -error&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (error) icon left&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -error&quot;&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (error) icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -error&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (error) icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -error&quot;&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-alert-circle-outline&quot;&gt;&lt;/button&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (error) clickable&lt;/span&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-close-outline&quot;&gt;&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -error&quot;&gt;secondary (error)&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -error&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (error) icon left&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -error&quot;&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (error) icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -error&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (error) icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -error&quot;&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-alert-circle-outline&quot;&gt;&lt;/button&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (error) clickable&lt;/span&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-close-outline&quot;&gt;&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -warning&quot;&gt;primary (warning)&lt;/span&gt;&lt;span class=&quot;ippon-badge -warning&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (warning) icon left&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -warning&quot;&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (warning) icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -warning&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (warning) icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -warning&quot;&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-alert-circle-outline&quot;&gt;&lt;/button&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (warning) clickable&lt;/span&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-close-outline&quot;&gt;&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -warning&quot;&gt;secondary (warning)&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -warning&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (warning) icon left&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -warning&quot;&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (warning) icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -warning&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (warning) icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -warning&quot;&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-alert-circle-outline&quot;&gt;&lt;/button&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (warning) clickable&lt;/span&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-close-outline&quot;&gt;&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -information&quot;&gt;primary (information)&lt;/span&gt;&lt;span class=&quot;ippon-badge -information&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (information) icon left&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -information&quot;&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (information) icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -information&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (information) icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -information&quot;&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-alert-circle-outline&quot;&gt;&lt;/button&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (information) clickable&lt;/span&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-close-outline&quot;&gt;&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -information&quot;&gt;secondary (information)&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -information&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (information) icon left&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -information&quot;&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (information) icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -information&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (information) icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -information&quot;&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-alert-circle-outline&quot;&gt;&lt;/button&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (information) clickable&lt;/span&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-close-outline&quot;&gt;&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -placeholder&quot;&gt;&lt;/span&gt;</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="&lt;span class=&quot;ippon-badge&quot;&gt;primary&lt;/span&gt;&lt;span class=&quot;ippon-badge&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary icon left&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge&quot;&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge&quot;&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-alert-circle-outline&quot;&gt;&lt;/button&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary clickable&lt;/span&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-close-outline&quot;&gt;&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary&quot;&gt;secondary&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary icon left&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary&quot;&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary&quot;&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-alert-circle-outline&quot;&gt;&lt;/button&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary clickable&lt;/span&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-close-outline&quot;&gt;&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -neutral&quot;&gt;primary (neutral)&lt;/span&gt;&lt;span class=&quot;ippon-badge -neutral&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (neutral) icon left&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -neutral&quot;&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (neutral) icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -neutral&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (neutral) icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -neutral&quot;&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-alert-circle-outline&quot;&gt;&lt;/button&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (neutral) clickable&lt;/span&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-close-outline&quot;&gt;&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -neutral&quot;&gt;secondary (neutral)&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -neutral&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (neutral) icon left&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -neutral&quot;&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (neutral) icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -neutral&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (neutral) icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -neutral&quot;&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-alert-circle-outline&quot;&gt;&lt;/button&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (neutral) clickable&lt;/span&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-close-outline&quot;&gt;&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -success&quot;&gt;primary (success)&lt;/span&gt;&lt;span class=&quot;ippon-badge -success&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (success) icon left&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -success&quot;&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (success) icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -success&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (success) icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -success&quot;&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-alert-circle-outline&quot;&gt;&lt;/button&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (success) clickable&lt;/span&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-close-outline&quot;&gt;&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -success&quot;&gt;secondary (success)&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -success&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (success) icon left&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -success&quot;&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (success) icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -success&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (success) icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -success&quot;&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-alert-circle-outline&quot;&gt;&lt;/button&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (success) clickable&lt;/span&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-close-outline&quot;&gt;&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -error&quot;&gt;primary (error)&lt;/span&gt;&lt;span class=&quot;ippon-badge -error&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (error) icon left&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -error&quot;&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (error) icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -error&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (error) icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -error&quot;&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-alert-circle-outline&quot;&gt;&lt;/button&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (error) clickable&lt;/span&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-close-outline&quot;&gt;&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -error&quot;&gt;secondary (error)&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -error&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (error) icon left&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -error&quot;&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (error) icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -error&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (error) icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -error&quot;&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-alert-circle-outline&quot;&gt;&lt;/button&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (error) clickable&lt;/span&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-close-outline&quot;&gt;&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -warning&quot;&gt;primary (warning)&lt;/span&gt;&lt;span class=&quot;ippon-badge -warning&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (warning) icon left&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -warning&quot;&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (warning) icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -warning&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (warning) icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -warning&quot;&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-alert-circle-outline&quot;&gt;&lt;/button&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (warning) clickable&lt;/span&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-close-outline&quot;&gt;&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -warning&quot;&gt;secondary (warning)&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -warning&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (warning) icon left&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -warning&quot;&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (warning) icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -warning&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (warning) icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -warning&quot;&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-alert-circle-outline&quot;&gt;&lt;/button&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (warning) clickable&lt;/span&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-close-outline&quot;&gt;&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -information&quot;&gt;primary (information)&lt;/span&gt;&lt;span class=&quot;ippon-badge -information&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (information) icon left&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -information&quot;&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (information) icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -information&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (information) icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -information&quot;&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-alert-circle-outline&quot;&gt;&lt;/button&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;primary (information) clickable&lt;/span&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-close-outline&quot;&gt;&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -information&quot;&gt;secondary (information)&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -information&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (information) icon left&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -information&quot;&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (information) icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -information&quot;&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-alert-circle-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (information) icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-badge--icon ippon-ion-close-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -secondary -information&quot;&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-alert-circle-outline&quot;&gt;&lt;/button&gt;&lt;span class=&quot;ippon-badge--text&quot;&gt;secondary (information) clickable&lt;/span&gt;
+  &lt;button class=&quot;ippon-badge--icon -clickable ippon-ion-close-outline&quot;&gt;&lt;/button&gt;&lt;/span&gt;&lt;span class=&quot;ippon-badge -placeholder&quot;&gt;&lt;/span&gt;">Copy</button></div><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-pug">span.ippon-badge primary
+span.ippon-badge
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text primary icon left
+span.ippon-badge
+  span.ippon-badge--text primary icon right
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text primary icon both
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge
+  button.ippon-badge--icon.-clickable.ippon-ion-alert-circle-outline
+  span.ippon-badge--text primary clickable
+  button.ippon-badge--icon.-clickable.ippon-ion-close-outline
+span.ippon-badge.-secondary secondary
+span.ippon-badge.-secondary
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text secondary icon left
+span.ippon-badge.-secondary
+  span.ippon-badge--text secondary icon right
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-secondary
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text secondary icon both
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-secondary
+  button.ippon-badge--icon.-clickable.ippon-ion-alert-circle-outline
+  span.ippon-badge--text secondary clickable
+  button.ippon-badge--icon.-clickable.ippon-ion-close-outline
+span.ippon-badge.-neutral primary (neutral)
+span.ippon-badge.-neutral
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text primary (neutral) icon left
+span.ippon-badge.-neutral
+  span.ippon-badge--text primary (neutral) icon right
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-neutral
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text primary (neutral) icon both
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-neutral
+  button.ippon-badge--icon.-clickable.ippon-ion-alert-circle-outline
+  span.ippon-badge--text primary (neutral) clickable
+  button.ippon-badge--icon.-clickable.ippon-ion-close-outline
+span.ippon-badge.-secondary.-neutral secondary (neutral)
+span.ippon-badge.-secondary.-neutral
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text secondary (neutral) icon left
+span.ippon-badge.-secondary.-neutral
+  span.ippon-badge--text secondary (neutral) icon right
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-secondary.-neutral
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text secondary (neutral) icon both
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-secondary.-neutral
+  button.ippon-badge--icon.-clickable.ippon-ion-alert-circle-outline
+  span.ippon-badge--text secondary (neutral) clickable
+  button.ippon-badge--icon.-clickable.ippon-ion-close-outline
+span.ippon-badge.-success primary (success)
+span.ippon-badge.-success
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text primary (success) icon left
+span.ippon-badge.-success
+  span.ippon-badge--text primary (success) icon right
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-success
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text primary (success) icon both
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-success
+  button.ippon-badge--icon.-clickable.ippon-ion-alert-circle-outline
+  span.ippon-badge--text primary (success) clickable
+  button.ippon-badge--icon.-clickable.ippon-ion-close-outline
+span.ippon-badge.-secondary.-success secondary (success)
+span.ippon-badge.-secondary.-success
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text secondary (success) icon left
+span.ippon-badge.-secondary.-success
+  span.ippon-badge--text secondary (success) icon right
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-secondary.-success
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text secondary (success) icon both
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-secondary.-success
+  button.ippon-badge--icon.-clickable.ippon-ion-alert-circle-outline
+  span.ippon-badge--text secondary (success) clickable
+  button.ippon-badge--icon.-clickable.ippon-ion-close-outline
+span.ippon-badge.-error primary (error)
+span.ippon-badge.-error
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text primary (error) icon left
+span.ippon-badge.-error
+  span.ippon-badge--text primary (error) icon right
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-error
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text primary (error) icon both
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-error
+  button.ippon-badge--icon.-clickable.ippon-ion-alert-circle-outline
+  span.ippon-badge--text primary (error) clickable
+  button.ippon-badge--icon.-clickable.ippon-ion-close-outline
+span.ippon-badge.-secondary.-error secondary (error)
+span.ippon-badge.-secondary.-error
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text secondary (error) icon left
+span.ippon-badge.-secondary.-error
+  span.ippon-badge--text secondary (error) icon right
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-secondary.-error
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text secondary (error) icon both
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-secondary.-error
+  button.ippon-badge--icon.-clickable.ippon-ion-alert-circle-outline
+  span.ippon-badge--text secondary (error) clickable
+  button.ippon-badge--icon.-clickable.ippon-ion-close-outline
+span.ippon-badge.-warning primary (warning)
+span.ippon-badge.-warning
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text primary (warning) icon left
+span.ippon-badge.-warning
+  span.ippon-badge--text primary (warning) icon right
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-warning
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text primary (warning) icon both
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-warning
+  button.ippon-badge--icon.-clickable.ippon-ion-alert-circle-outline
+  span.ippon-badge--text primary (warning) clickable
+  button.ippon-badge--icon.-clickable.ippon-ion-close-outline
+span.ippon-badge.-secondary.-warning secondary (warning)
+span.ippon-badge.-secondary.-warning
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text secondary (warning) icon left
+span.ippon-badge.-secondary.-warning
+  span.ippon-badge--text secondary (warning) icon right
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-secondary.-warning
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text secondary (warning) icon both
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-secondary.-warning
+  button.ippon-badge--icon.-clickable.ippon-ion-alert-circle-outline
+  span.ippon-badge--text secondary (warning) clickable
+  button.ippon-badge--icon.-clickable.ippon-ion-close-outline
+span.ippon-badge.-information primary (information)
+span.ippon-badge.-information
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text primary (information) icon left
+span.ippon-badge.-information
+  span.ippon-badge--text primary (information) icon right
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-information
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text primary (information) icon both
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-information
+  button.ippon-badge--icon.-clickable.ippon-ion-alert-circle-outline
+  span.ippon-badge--text primary (information) clickable
+  button.ippon-badge--icon.-clickable.ippon-ion-close-outline
+span.ippon-badge.-secondary.-information secondary (information)
+span.ippon-badge.-secondary.-information
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text secondary (information) icon left
+span.ippon-badge.-secondary.-information
+  span.ippon-badge--text secondary (information) icon right
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-secondary.-information
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text secondary (information) icon both
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-secondary.-information
+  button.ippon-badge--icon.-clickable.ippon-ion-alert-circle-outline
+  span.ippon-badge--text secondary (information) clickable
+  button.ippon-badge--icon.-clickable.ippon-ion-close-outline
+span.ippon-badge.-placeholder</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+span.ippon-badge primary
+span.ippon-badge
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text primary icon left
+span.ippon-badge
+  span.ippon-badge--text primary icon right
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text primary icon both
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge
+  button.ippon-badge--icon.-clickable.ippon-ion-alert-circle-outline
+  span.ippon-badge--text primary clickable
+  button.ippon-badge--icon.-clickable.ippon-ion-close-outline
+span.ippon-badge.-secondary secondary
+span.ippon-badge.-secondary
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text secondary icon left
+span.ippon-badge.-secondary
+  span.ippon-badge--text secondary icon right
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-secondary
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text secondary icon both
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-secondary
+  button.ippon-badge--icon.-clickable.ippon-ion-alert-circle-outline
+  span.ippon-badge--text secondary clickable
+  button.ippon-badge--icon.-clickable.ippon-ion-close-outline
+span.ippon-badge.-neutral primary (neutral)
+span.ippon-badge.-neutral
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text primary (neutral) icon left
+span.ippon-badge.-neutral
+  span.ippon-badge--text primary (neutral) icon right
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-neutral
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text primary (neutral) icon both
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-neutral
+  button.ippon-badge--icon.-clickable.ippon-ion-alert-circle-outline
+  span.ippon-badge--text primary (neutral) clickable
+  button.ippon-badge--icon.-clickable.ippon-ion-close-outline
+span.ippon-badge.-secondary.-neutral secondary (neutral)
+span.ippon-badge.-secondary.-neutral
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text secondary (neutral) icon left
+span.ippon-badge.-secondary.-neutral
+  span.ippon-badge--text secondary (neutral) icon right
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-secondary.-neutral
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text secondary (neutral) icon both
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-secondary.-neutral
+  button.ippon-badge--icon.-clickable.ippon-ion-alert-circle-outline
+  span.ippon-badge--text secondary (neutral) clickable
+  button.ippon-badge--icon.-clickable.ippon-ion-close-outline
+span.ippon-badge.-success primary (success)
+span.ippon-badge.-success
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text primary (success) icon left
+span.ippon-badge.-success
+  span.ippon-badge--text primary (success) icon right
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-success
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text primary (success) icon both
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-success
+  button.ippon-badge--icon.-clickable.ippon-ion-alert-circle-outline
+  span.ippon-badge--text primary (success) clickable
+  button.ippon-badge--icon.-clickable.ippon-ion-close-outline
+span.ippon-badge.-secondary.-success secondary (success)
+span.ippon-badge.-secondary.-success
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text secondary (success) icon left
+span.ippon-badge.-secondary.-success
+  span.ippon-badge--text secondary (success) icon right
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-secondary.-success
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text secondary (success) icon both
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-secondary.-success
+  button.ippon-badge--icon.-clickable.ippon-ion-alert-circle-outline
+  span.ippon-badge--text secondary (success) clickable
+  button.ippon-badge--icon.-clickable.ippon-ion-close-outline
+span.ippon-badge.-error primary (error)
+span.ippon-badge.-error
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text primary (error) icon left
+span.ippon-badge.-error
+  span.ippon-badge--text primary (error) icon right
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-error
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text primary (error) icon both
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-error
+  button.ippon-badge--icon.-clickable.ippon-ion-alert-circle-outline
+  span.ippon-badge--text primary (error) clickable
+  button.ippon-badge--icon.-clickable.ippon-ion-close-outline
+span.ippon-badge.-secondary.-error secondary (error)
+span.ippon-badge.-secondary.-error
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text secondary (error) icon left
+span.ippon-badge.-secondary.-error
+  span.ippon-badge--text secondary (error) icon right
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-secondary.-error
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text secondary (error) icon both
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-secondary.-error
+  button.ippon-badge--icon.-clickable.ippon-ion-alert-circle-outline
+  span.ippon-badge--text secondary (error) clickable
+  button.ippon-badge--icon.-clickable.ippon-ion-close-outline
+span.ippon-badge.-warning primary (warning)
+span.ippon-badge.-warning
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text primary (warning) icon left
+span.ippon-badge.-warning
+  span.ippon-badge--text primary (warning) icon right
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-warning
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text primary (warning) icon both
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-warning
+  button.ippon-badge--icon.-clickable.ippon-ion-alert-circle-outline
+  span.ippon-badge--text primary (warning) clickable
+  button.ippon-badge--icon.-clickable.ippon-ion-close-outline
+span.ippon-badge.-secondary.-warning secondary (warning)
+span.ippon-badge.-secondary.-warning
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text secondary (warning) icon left
+span.ippon-badge.-secondary.-warning
+  span.ippon-badge--text secondary (warning) icon right
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-secondary.-warning
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text secondary (warning) icon both
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-secondary.-warning
+  button.ippon-badge--icon.-clickable.ippon-ion-alert-circle-outline
+  span.ippon-badge--text secondary (warning) clickable
+  button.ippon-badge--icon.-clickable.ippon-ion-close-outline
+span.ippon-badge.-information primary (information)
+span.ippon-badge.-information
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text primary (information) icon left
+span.ippon-badge.-information
+  span.ippon-badge--text primary (information) icon right
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-information
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text primary (information) icon both
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-information
+  button.ippon-badge--icon.-clickable.ippon-ion-alert-circle-outline
+  span.ippon-badge--text primary (information) clickable
+  button.ippon-badge--icon.-clickable.ippon-ion-close-outline
+span.ippon-badge.-secondary.-information secondary (information)
+span.ippon-badge.-secondary.-information
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text secondary (information) icon left
+span.ippon-badge.-secondary.-information
+  span.ippon-badge--text secondary (information) icon right
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-secondary.-information
+  span.ippon-badge--icon.ippon-ion-alert-circle-outline(role=&quot;presentation&quot;)
+  span.ippon-badge--text secondary (information) icon both
+  span.ippon-badge--icon.ippon-ion-close-outline(role=&quot;presentation&quot;)
+span.ippon-badge.-secondary.-information
+  button.ippon-badge--icon.-clickable.ippon-ion-alert-circle-outline
+  span.ippon-badge--text secondary (information) clickable
+  button.ippon-badge--icon.-clickable.ippon-ion-close-outline
+span.ippon-badge.-placeholder">Copy</button></div></div></div></div></div><div class="tikui-vertical-spacing--line"><div class="tikui-component"><div class="tikui-component--markdown markdown"><h2 id="button">Button</h2>
+<p><strong>Colors:</strong></p>
+<ul>
+<li>Default</li>
+<li>Success <code>-success</code></li>
+<li>Error <code>-error</code></li>
+<li>Information <code>-information</code></li>
+<li>Warning <code>-warning</code></li>
+<li>Neutral <code>-neutral</code></li>
+</ul>
+<p><strong>Variants:</strong></p>
+<ul>
+<li>Primary</li>
+<li>Secondary <code>-secondary</code></li>
+<li>Outline <code>-outline</code></li>
+<li>Text <code>-text</code></li>
+</ul>
+<p><strong>States:</strong></p>
+<ul>
+<li>Loading <code>-loading</code> (adds <code>disabled</code> and <code>aria-busy="true"</code>)</li>
+<li>When a right icon is present, replace it with a <code>sync</code> icon (the CSS animation is handled by <code>-loading</code>)</li>
+</ul>
+<p><strong>Icons:</strong></p>
+<p>If you use <a href="../icons/index.html">icons</a>, don't forget to wrap each child in a <strong>part</strong>:</p>
+<ul>
+<li><code>icon-button--icon</code> for the icon</li>
+<li><code>icon-button--text</code> for the text</li>
+</ul>
+<blockquote>
+  <p>It's because the space before and after the icon is different from a <em>text</em> or an <em>icon</em>.</p>
+</blockquote></div><div class="tikui-component--render render"><iframe class="doc-iframe" src="../atom/button/button.render.html" height="680" title="Component rendering"></iframe></div><div class="tikui-component--code code"><div class="tikui-line-section -s24"><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-html">&lt;button class=&quot;ippon-button -small&quot;&gt;Default primary (small)
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -secondary -small&quot;&gt;Default secondary (small)
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -outline -small&quot;&gt;Default outline (small)
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -text -small&quot;&gt;Default text (small)
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -small&quot; disabled=&quot;disabled&quot;&gt;disabled
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -small -loading&quot; disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;&gt;loading
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button&quot;&gt;Default primary
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -secondary&quot;&gt;Default secondary
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -outline&quot;&gt;Default outline
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -text&quot;&gt;Default text
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button&quot; disabled=&quot;disabled&quot;&gt;disabled
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -loading&quot; disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;&gt;loading
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -large&quot;&gt;Default primary (large)
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -secondary -large&quot;&gt;Default secondary (large)
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -outline -large&quot;&gt;Default outline (large)
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -text -large&quot;&gt;Default text (large)
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -large&quot; disabled=&quot;disabled&quot;&gt;disabled
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -large -loading&quot; disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;&gt;loading
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -success&quot;&gt;Success primary
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -success -secondary&quot;&gt;Success secondary
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -success -outline&quot;&gt;Success outline
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -success -text&quot;&gt;Success text
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -success&quot; disabled=&quot;disabled&quot;&gt;disabled
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -success -loading&quot; disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;&gt;loading
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -error&quot;&gt;Error primary
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -error -secondary&quot;&gt;Error secondary
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -error -outline&quot;&gt;Error outline
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -error -text&quot;&gt;Error text
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -error&quot; disabled=&quot;disabled&quot;&gt;disabled
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -error -loading&quot; disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;&gt;loading
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -information&quot;&gt;Information primary
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -information -secondary&quot;&gt;Information secondary
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -information -outline&quot;&gt;Information outline
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -information -text&quot;&gt;Information text
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -information&quot; disabled=&quot;disabled&quot;&gt;disabled
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -information -loading&quot; disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;&gt;loading
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -warning&quot;&gt;Warning primary
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -warning -secondary&quot;&gt;Warning secondary
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -warning -outline&quot;&gt;Warning outline
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -warning -text&quot;&gt;Warning text
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -warning&quot; disabled=&quot;disabled&quot;&gt;disabled
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -warning -loading&quot; disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;&gt;loading
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -neutral&quot;&gt;Neutral primary
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -neutral -secondary&quot;&gt;Neutral secondary
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -neutral -outline&quot;&gt;Neutral outline
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -neutral -text&quot;&gt;Neutral text
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -neutral&quot; disabled=&quot;disabled&quot;&gt;disabled
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -neutral -loading&quot; disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;&gt;loading
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -small&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-heart&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -secondary -small&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-logo-angular&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Icon left&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -outline -small&quot;&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-search&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -text -small&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-remove&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-add&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -small&quot; disabled=&quot;disabled&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-remove&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Disabled&lt;/span&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-add&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -small -loading&quot; disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-remove&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Loading&lt;/span&gt;
+  &lt;span class=&quot;ippon-button--icon -loading ippon-ion-sync&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-heart&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -secondary&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-logo-angular&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Icon left&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -outline&quot;&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-search&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -text&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-remove&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-add&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button&quot; disabled=&quot;disabled&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-remove&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Disabled&lt;/span&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-add&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -loading&quot; disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-remove&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Loading&lt;/span&gt;
+  &lt;span class=&quot;ippon-button--icon -loading ippon-ion-sync&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -large&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-heart&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -secondary -large&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-logo-angular&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Icon left&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -outline -large&quot;&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-search&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -text -large&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-remove&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-add&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -large&quot; disabled=&quot;disabled&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-remove&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Disabled&lt;/span&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-add&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -large -loading&quot; disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-remove&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Loading&lt;/span&gt;
+  &lt;span class=&quot;ippon-button--icon -loading ippon-ion-sync&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+&lt;button class=&quot;ippon-button -small&quot;&gt;Default primary (small)
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -secondary -small&quot;&gt;Default secondary (small)
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -outline -small&quot;&gt;Default outline (small)
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -text -small&quot;&gt;Default text (small)
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -small&quot; disabled=&quot;disabled&quot;&gt;disabled
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -small -loading&quot; disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;&gt;loading
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button&quot;&gt;Default primary
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -secondary&quot;&gt;Default secondary
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -outline&quot;&gt;Default outline
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -text&quot;&gt;Default text
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button&quot; disabled=&quot;disabled&quot;&gt;disabled
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -loading&quot; disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;&gt;loading
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -large&quot;&gt;Default primary (large)
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -secondary -large&quot;&gt;Default secondary (large)
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -outline -large&quot;&gt;Default outline (large)
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -text -large&quot;&gt;Default text (large)
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -large&quot; disabled=&quot;disabled&quot;&gt;disabled
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -large -loading&quot; disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;&gt;loading
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -success&quot;&gt;Success primary
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -success -secondary&quot;&gt;Success secondary
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -success -outline&quot;&gt;Success outline
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -success -text&quot;&gt;Success text
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -success&quot; disabled=&quot;disabled&quot;&gt;disabled
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -success -loading&quot; disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;&gt;loading
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -error&quot;&gt;Error primary
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -error -secondary&quot;&gt;Error secondary
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -error -outline&quot;&gt;Error outline
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -error -text&quot;&gt;Error text
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -error&quot; disabled=&quot;disabled&quot;&gt;disabled
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -error -loading&quot; disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;&gt;loading
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -information&quot;&gt;Information primary
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -information -secondary&quot;&gt;Information secondary
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -information -outline&quot;&gt;Information outline
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -information -text&quot;&gt;Information text
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -information&quot; disabled=&quot;disabled&quot;&gt;disabled
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -information -loading&quot; disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;&gt;loading
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -warning&quot;&gt;Warning primary
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -warning -secondary&quot;&gt;Warning secondary
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -warning -outline&quot;&gt;Warning outline
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -warning -text&quot;&gt;Warning text
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -warning&quot; disabled=&quot;disabled&quot;&gt;disabled
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -warning -loading&quot; disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;&gt;loading
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -neutral&quot;&gt;Neutral primary
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -neutral -secondary&quot;&gt;Neutral secondary
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -neutral -outline&quot;&gt;Neutral outline
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -neutral -text&quot;&gt;Neutral text
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -neutral&quot; disabled=&quot;disabled&quot;&gt;disabled
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -neutral -loading&quot; disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;&gt;loading
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -small&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-heart&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -secondary -small&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-logo-angular&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Icon left&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -outline -small&quot;&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-search&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -text -small&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-remove&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-add&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -small&quot; disabled=&quot;disabled&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-remove&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Disabled&lt;/span&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-add&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -small -loading&quot; disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-remove&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Loading&lt;/span&gt;
+  &lt;span class=&quot;ippon-button--icon -loading ippon-ion-sync&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-heart&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -secondary&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-logo-angular&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Icon left&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -outline&quot;&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-search&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -text&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-remove&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-add&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button&quot; disabled=&quot;disabled&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-remove&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Disabled&lt;/span&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-add&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -loading&quot; disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-remove&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Loading&lt;/span&gt;
+  &lt;span class=&quot;ippon-button--icon -loading ippon-ion-sync&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -large&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-heart&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -secondary -large&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-logo-angular&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Icon left&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -outline -large&quot;&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Icon right&lt;/span&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-search&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -text -large&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-remove&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Icon both&lt;/span&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-add&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -large&quot; disabled=&quot;disabled&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-remove&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Disabled&lt;/span&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-add&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button -large -loading&quot; disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;&gt;
+  &lt;span class=&quot;ippon-button--icon ippon-ion-remove&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Loading&lt;/span&gt;
+  &lt;span class=&quot;ippon-button--icon -loading ippon-ion-sync&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;/button&gt;">Copy</button></div><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-pug">button.ippon-button.-small Default primary (small)
+button.ippon-button.-secondary.-small Default secondary (small)
+button.ippon-button.-outline.-small Default outline (small)
+button.ippon-button.-text.-small Default text (small)
+button.ippon-button.-small(disabled=&quot;disabled&quot;)
+  | disabled
+button.ippon-button.-small.-loading(disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;)
+  | loading
+button.ippon-button Default primary
+button.ippon-button.-secondary Default secondary
+button.ippon-button.-outline Default outline
+button.ippon-button.-text Default text
+button.ippon-button(disabled=&quot;disabled&quot;)
+  | disabled
+button.ippon-button.-loading(disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;)
+  | loading
+button.ippon-button.-large Default primary (large)
+button.ippon-button.-secondary.-large Default secondary (large)
+button.ippon-button.-outline.-large Default outline (large)
+button.ippon-button.-text.-large Default text (large)
+button.ippon-button.-large(disabled=&quot;disabled&quot;)
+  | disabled
+button.ippon-button.-large.-loading(disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;)
+  | loading
+button.ippon-button.-success Success primary
+button.ippon-button.-success.-secondary Success secondary
+button.ippon-button.-success.-outline Success outline
+button.ippon-button.-success.-text Success text
+button.ippon-button.-success(disabled=&quot;disabled&quot;)
+  | disabled
+button.ippon-button.-success.-loading(disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;)
+  | loading
+button.ippon-button.-error Error primary
+button.ippon-button.-error.-secondary Error secondary
+button.ippon-button.-error.-outline Error outline
+button.ippon-button.-error.-text Error text
+button.ippon-button.-error(disabled=&quot;disabled&quot;)
+  | disabled
+button.ippon-button.-error.-loading(disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;)
+  | loading
+button.ippon-button.-information Information primary
+button.ippon-button.-information.-secondary Information secondary
+button.ippon-button.-information.-outline Information outline
+button.ippon-button.-information.-text Information text
+button.ippon-button.-information(disabled=&quot;disabled&quot;)
+  | disabled
+button.ippon-button.-information.-loading(disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;)
+  | loading
+button.ippon-button.-warning Warning primary
+button.ippon-button.-warning.-secondary Warning secondary
+button.ippon-button.-warning.-outline Warning outline
+button.ippon-button.-warning.-text Warning text
+button.ippon-button.-warning(disabled=&quot;disabled&quot;)
+  | disabled
+button.ippon-button.-warning.-loading(disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;)
+  | loading
+button.ippon-button.-neutral Neutral primary
+button.ippon-button.-neutral.-secondary Neutral secondary
+button.ippon-button.-neutral.-outline Neutral outline
+button.ippon-button.-neutral.-text Neutral text
+button.ippon-button.-neutral(disabled=&quot;disabled&quot;)
+  | disabled
+button.ippon-button.-neutral.-loading(disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;)
+  | loading
+button.ippon-button.-small
+  span.ippon-button--icon.ippon-ion-heart(role=&quot;presentation&quot;)
+button.ippon-button.-secondary.-small
+  span.ippon-button--icon.ippon-ion-logo-angular(role=&quot;presentation&quot;)
+  span.ippon-button--text Icon left
+button.ippon-button.-outline.-small
+  span.ippon-button--text Icon right
+  span.ippon-button--icon.ippon-ion-search(role=&quot;presentation&quot;)
+button.ippon-button.-text.-small
+  span.ippon-button--icon.ippon-ion-remove(role=&quot;presentation&quot;)
+  span.ippon-button--text Icon both
+  span.ippon-button--icon.ippon-ion-add(role=&quot;presentation&quot;)
+button.ippon-button.-small(disabled=&quot;disabled&quot;)
+  span.ippon-button--icon.ippon-ion-remove(role=&quot;presentation&quot;)
+  span.ippon-button--text Disabled
+  span.ippon-button--icon.ippon-ion-add(role=&quot;presentation&quot;)
+button.ippon-button.-small.-loading(disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;)
+  span.ippon-button--icon.ippon-ion-remove(role=&quot;presentation&quot;)
+  span.ippon-button--text Loading
+  span.ippon-button--icon.-loading.ippon-ion-sync(role=&quot;presentation&quot;)
+button.ippon-button
+  span.ippon-button--icon.ippon-ion-heart(role=&quot;presentation&quot;)
+button.ippon-button.-secondary
+  span.ippon-button--icon.ippon-ion-logo-angular(role=&quot;presentation&quot;)
+  span.ippon-button--text Icon left
+button.ippon-button.-outline
+  span.ippon-button--text Icon right
+  span.ippon-button--icon.ippon-ion-search(role=&quot;presentation&quot;)
+button.ippon-button.-text
+  span.ippon-button--icon.ippon-ion-remove(role=&quot;presentation&quot;)
+  span.ippon-button--text Icon both
+  span.ippon-button--icon.ippon-ion-add(role=&quot;presentation&quot;)
+button.ippon-button(disabled=&quot;disabled&quot;)
+  span.ippon-button--icon.ippon-ion-remove(role=&quot;presentation&quot;)
+  span.ippon-button--text Disabled
+  span.ippon-button--icon.ippon-ion-add(role=&quot;presentation&quot;)
+button.ippon-button.-loading(disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;)
+  span.ippon-button--icon.ippon-ion-remove(role=&quot;presentation&quot;)
+  span.ippon-button--text Loading
+  span.ippon-button--icon.-loading.ippon-ion-sync(role=&quot;presentation&quot;)
+button.ippon-button.-large
+  span.ippon-button--icon.ippon-ion-heart(role=&quot;presentation&quot;)
+button.ippon-button.-secondary.-large
+  span.ippon-button--icon.ippon-ion-logo-angular(role=&quot;presentation&quot;)
+  span.ippon-button--text Icon left
+button.ippon-button.-outline.-large
+  span.ippon-button--text Icon right
+  span.ippon-button--icon.ippon-ion-search(role=&quot;presentation&quot;)
+button.ippon-button.-text.-large
+  span.ippon-button--icon.ippon-ion-remove(role=&quot;presentation&quot;)
+  span.ippon-button--text Icon both
+  span.ippon-button--icon.ippon-ion-add(role=&quot;presentation&quot;)
+button.ippon-button.-large(disabled=&quot;disabled&quot;)
+  span.ippon-button--icon.ippon-ion-remove(role=&quot;presentation&quot;)
+  span.ippon-button--text Disabled
+  span.ippon-button--icon.ippon-ion-add(role=&quot;presentation&quot;)
+button.ippon-button.-large.-loading(disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;)
+  span.ippon-button--icon.ippon-ion-remove(role=&quot;presentation&quot;)
+  span.ippon-button--text Loading
+  span.ippon-button--icon.-loading.ippon-ion-sync(role=&quot;presentation&quot;)</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+button.ippon-button.-small Default primary (small)
+button.ippon-button.-secondary.-small Default secondary (small)
+button.ippon-button.-outline.-small Default outline (small)
+button.ippon-button.-text.-small Default text (small)
+button.ippon-button.-small(disabled=&quot;disabled&quot;)
+  | disabled
+button.ippon-button.-small.-loading(disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;)
+  | loading
+button.ippon-button Default primary
+button.ippon-button.-secondary Default secondary
+button.ippon-button.-outline Default outline
+button.ippon-button.-text Default text
+button.ippon-button(disabled=&quot;disabled&quot;)
+  | disabled
+button.ippon-button.-loading(disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;)
+  | loading
+button.ippon-button.-large Default primary (large)
+button.ippon-button.-secondary.-large Default secondary (large)
+button.ippon-button.-outline.-large Default outline (large)
+button.ippon-button.-text.-large Default text (large)
+button.ippon-button.-large(disabled=&quot;disabled&quot;)
+  | disabled
+button.ippon-button.-large.-loading(disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;)
+  | loading
+button.ippon-button.-success Success primary
+button.ippon-button.-success.-secondary Success secondary
+button.ippon-button.-success.-outline Success outline
+button.ippon-button.-success.-text Success text
+button.ippon-button.-success(disabled=&quot;disabled&quot;)
+  | disabled
+button.ippon-button.-success.-loading(disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;)
+  | loading
+button.ippon-button.-error Error primary
+button.ippon-button.-error.-secondary Error secondary
+button.ippon-button.-error.-outline Error outline
+button.ippon-button.-error.-text Error text
+button.ippon-button.-error(disabled=&quot;disabled&quot;)
+  | disabled
+button.ippon-button.-error.-loading(disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;)
+  | loading
+button.ippon-button.-information Information primary
+button.ippon-button.-information.-secondary Information secondary
+button.ippon-button.-information.-outline Information outline
+button.ippon-button.-information.-text Information text
+button.ippon-button.-information(disabled=&quot;disabled&quot;)
+  | disabled
+button.ippon-button.-information.-loading(disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;)
+  | loading
+button.ippon-button.-warning Warning primary
+button.ippon-button.-warning.-secondary Warning secondary
+button.ippon-button.-warning.-outline Warning outline
+button.ippon-button.-warning.-text Warning text
+button.ippon-button.-warning(disabled=&quot;disabled&quot;)
+  | disabled
+button.ippon-button.-warning.-loading(disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;)
+  | loading
+button.ippon-button.-neutral Neutral primary
+button.ippon-button.-neutral.-secondary Neutral secondary
+button.ippon-button.-neutral.-outline Neutral outline
+button.ippon-button.-neutral.-text Neutral text
+button.ippon-button.-neutral(disabled=&quot;disabled&quot;)
+  | disabled
+button.ippon-button.-neutral.-loading(disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;)
+  | loading
+button.ippon-button.-small
+  span.ippon-button--icon.ippon-ion-heart(role=&quot;presentation&quot;)
+button.ippon-button.-secondary.-small
+  span.ippon-button--icon.ippon-ion-logo-angular(role=&quot;presentation&quot;)
+  span.ippon-button--text Icon left
+button.ippon-button.-outline.-small
+  span.ippon-button--text Icon right
+  span.ippon-button--icon.ippon-ion-search(role=&quot;presentation&quot;)
+button.ippon-button.-text.-small
+  span.ippon-button--icon.ippon-ion-remove(role=&quot;presentation&quot;)
+  span.ippon-button--text Icon both
+  span.ippon-button--icon.ippon-ion-add(role=&quot;presentation&quot;)
+button.ippon-button.-small(disabled=&quot;disabled&quot;)
+  span.ippon-button--icon.ippon-ion-remove(role=&quot;presentation&quot;)
+  span.ippon-button--text Disabled
+  span.ippon-button--icon.ippon-ion-add(role=&quot;presentation&quot;)
+button.ippon-button.-small.-loading(disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;)
+  span.ippon-button--icon.ippon-ion-remove(role=&quot;presentation&quot;)
+  span.ippon-button--text Loading
+  span.ippon-button--icon.-loading.ippon-ion-sync(role=&quot;presentation&quot;)
+button.ippon-button
+  span.ippon-button--icon.ippon-ion-heart(role=&quot;presentation&quot;)
+button.ippon-button.-secondary
+  span.ippon-button--icon.ippon-ion-logo-angular(role=&quot;presentation&quot;)
+  span.ippon-button--text Icon left
+button.ippon-button.-outline
+  span.ippon-button--text Icon right
+  span.ippon-button--icon.ippon-ion-search(role=&quot;presentation&quot;)
+button.ippon-button.-text
+  span.ippon-button--icon.ippon-ion-remove(role=&quot;presentation&quot;)
+  span.ippon-button--text Icon both
+  span.ippon-button--icon.ippon-ion-add(role=&quot;presentation&quot;)
+button.ippon-button(disabled=&quot;disabled&quot;)
+  span.ippon-button--icon.ippon-ion-remove(role=&quot;presentation&quot;)
+  span.ippon-button--text Disabled
+  span.ippon-button--icon.ippon-ion-add(role=&quot;presentation&quot;)
+button.ippon-button.-loading(disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;)
+  span.ippon-button--icon.ippon-ion-remove(role=&quot;presentation&quot;)
+  span.ippon-button--text Loading
+  span.ippon-button--icon.-loading.ippon-ion-sync(role=&quot;presentation&quot;)
+button.ippon-button.-large
+  span.ippon-button--icon.ippon-ion-heart(role=&quot;presentation&quot;)
+button.ippon-button.-secondary.-large
+  span.ippon-button--icon.ippon-ion-logo-angular(role=&quot;presentation&quot;)
+  span.ippon-button--text Icon left
+button.ippon-button.-outline.-large
+  span.ippon-button--text Icon right
+  span.ippon-button--icon.ippon-ion-search(role=&quot;presentation&quot;)
+button.ippon-button.-text.-large
+  span.ippon-button--icon.ippon-ion-remove(role=&quot;presentation&quot;)
+  span.ippon-button--text Icon both
+  span.ippon-button--icon.ippon-ion-add(role=&quot;presentation&quot;)
+button.ippon-button.-large(disabled=&quot;disabled&quot;)
+  span.ippon-button--icon.ippon-ion-remove(role=&quot;presentation&quot;)
+  span.ippon-button--text Disabled
+  span.ippon-button--icon.ippon-ion-add(role=&quot;presentation&quot;)
+button.ippon-button.-large.-loading(disabled=&quot;disabled&quot; aria-busy=&quot;true&quot;)
+  span.ippon-button--icon.ippon-ion-remove(role=&quot;presentation&quot;)
+  span.ippon-button--text Loading
+  span.ippon-button--icon.-loading.ippon-ion-sync(role=&quot;presentation&quot;)">Copy</button></div></div></div></div></div><div class="tikui-vertical-spacing--line"><div class="tikui-component"><div class="tikui-component--markdown markdown"><h2 id="icon">Icon</h2>
+<p>The <code>icon</code> atom represents a graphical icon element from the Ionicons library.</p>
+<p><strong>Usage</strong></p>
+<p>Icons are rendered using the <code>ippon-icon</code> class with the <code>ippon-ion-{name}</code> classes to specify which icon to display from the Ionicons library.</p>
+<p><strong>Sizing</strong></p>
+<p>Icons inherit their size from the parent element's font size. They maintain a 1:1 aspect ratio.</p></div><div class="tikui-component--render render"><iframe class="doc-iframe" src="../atom/icon/icon.render.html" height="50" title="Component rendering"></iframe></div><div class="tikui-component--code code"><div class="tikui-line-section -s24"><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-html">&lt;span class=&quot;ippon-icon ippon-ion-add&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;ippon-icon -size-24 ippon-ion-close&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;ippon-icon -color-brand-primary ippon-ion-close&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+&lt;span class=&quot;ippon-icon ippon-ion-add&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;ippon-icon -size-24 ippon-ion-close&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;ippon-icon -color-brand-primary ippon-ion-close&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;">Copy</button></div><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-pug">span.ippon-icon.ippon-ion-add(role=&quot;presentation&quot;)
+span.ippon-icon.-size-24.ippon-ion-close(role=&quot;presentation&quot;)
+span.ippon-icon.-color-brand-primary.ippon-ion-close(role=&quot;presentation&quot;)</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+span.ippon-icon.ippon-ion-add(role=&quot;presentation&quot;)
+span.ippon-icon.-size-24.ippon-ion-close(role=&quot;presentation&quot;)
+span.ippon-icon.-color-brand-primary.ippon-ion-close(role=&quot;presentation&quot;)">Copy</button></div></div></div></div></div><div class="tikui-vertical-spacing--line"><div class="tikui-component"><div class="tikui-component--markdown markdown"><h2 id="ionicons">Ion (Icons)</h2>
+<p>Ion are based on <em>Ionicons</em>, the set is <a href="../icons/index.html">available here</a>.</p>
+<p>There is two kinds of icons:</p>
+<ul>
+<li>Classic ones: start with <code>ippon-ion-</code> followed by suffix (Variant):</li>
+<li>Nothing: the default one (<strong>Filled</strong>).</li>
+<li><code>-outline</code> for the <strong>outline</strong> version.</li>
+<li><code>-sharp</code> for the <strong>sharp</strong> version.</li>
+<li>Logo ones: start with <code>ippon-ion-logo-</code> followed by the name of the logo.</li>
+</ul></div><div class="tikui-component--render render"><iframe class="doc-iframe" src="../atom/ion/ion.render.html" height="60" title="Component rendering"></iframe></div><div class="tikui-component--code code"><div class="tikui-line-section -s24"><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-html">&lt;span class=&quot;ippon-ion-home&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;ippon-ion-home-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;ippon-ion-home-sharp&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;ippon-ion-logo-angular&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;ippon-ion-logo-react&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;ippon-ion-logo-vue&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+&lt;span class=&quot;ippon-ion-home&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;ippon-ion-home-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;ippon-ion-home-sharp&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;ippon-ion-logo-angular&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;ippon-ion-logo-react&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;ippon-ion-logo-vue&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;">Copy</button></div><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-pug">span.ippon-ion-home(role=&quot;presentation&quot;)
+span.ippon-ion-home-outline(role=&quot;presentation&quot;)
+span.ippon-ion-home-sharp(role=&quot;presentation&quot;)
+span.ippon-ion-logo-angular(role=&quot;presentation&quot;)
+span.ippon-ion-logo-react(role=&quot;presentation&quot;)
+span.ippon-ion-logo-vue(role=&quot;presentation&quot;)</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+span.ippon-ion-home(role=&quot;presentation&quot;)
+span.ippon-ion-home-outline(role=&quot;presentation&quot;)
+span.ippon-ion-home-sharp(role=&quot;presentation&quot;)
+span.ippon-ion-logo-angular(role=&quot;presentation&quot;)
+span.ippon-ion-logo-react(role=&quot;presentation&quot;)
+span.ippon-ion-logo-vue(role=&quot;presentation&quot;)">Copy</button></div></div></div></div></div><div class="tikui-vertical-spacing--line"><div class="tikui-component"><div class="tikui-component--markdown markdown"><h2 id="meter">Meter</h2>
+<p>A meter component to display a gauge indicator with a minimum, current, and maximum value.</p>
+<p><strong>Accessibility:</strong></p>
+<p>Uses ARIA <code>role="meter"</code> with <code>aria-valuenow</code>, <code>aria-valuemin</code>, and <code>aria-valuemax</code> attributes for proper accessibility support.</p></div><div class="tikui-component--render render"><iframe class="doc-iframe" src="../atom/meter/meter.render.html" height="150" title="Component rendering"></iframe></div><div class="tikui-component--code code"><div class="tikui-line-section -s24"><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-html">&lt;div class=&quot;ippon-meter&quot; role=&quot;meter&quot; aria-valuenow=&quot;0&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-meter-percentage: 0%&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;ippon-meter&quot; role=&quot;meter&quot; aria-valuenow=&quot;25&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-meter-percentage: 25%&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;ippon-meter&quot; role=&quot;meter&quot; aria-valuenow=&quot;50&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-meter-percentage: 50%&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;ippon-meter&quot; role=&quot;meter&quot; aria-valuenow=&quot;75&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-meter-percentage: 75%&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;ippon-meter&quot; role=&quot;meter&quot; aria-valuenow=&quot;100&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-meter-percentage: 100%&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;ippon-meter&quot; role=&quot;meter&quot; aria-valuenow=&quot;150&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;200&quot; style=&quot;--ippon-meter-percentage: 75%&quot;&gt;&lt;/div&gt;</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+&lt;div class=&quot;ippon-meter&quot; role=&quot;meter&quot; aria-valuenow=&quot;0&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-meter-percentage: 0%&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;ippon-meter&quot; role=&quot;meter&quot; aria-valuenow=&quot;25&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-meter-percentage: 25%&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;ippon-meter&quot; role=&quot;meter&quot; aria-valuenow=&quot;50&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-meter-percentage: 50%&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;ippon-meter&quot; role=&quot;meter&quot; aria-valuenow=&quot;75&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-meter-percentage: 75%&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;ippon-meter&quot; role=&quot;meter&quot; aria-valuenow=&quot;100&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-meter-percentage: 100%&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;ippon-meter&quot; role=&quot;meter&quot; aria-valuenow=&quot;150&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;200&quot; style=&quot;--ippon-meter-percentage: 75%&quot;&gt;&lt;/div&gt;">Copy</button></div><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-pug">.ippon-meter(role=&quot;meter&quot; aria-valuenow=&quot;0&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-meter-percentage: 0%&quot;)
+.ippon-meter(role=&quot;meter&quot; aria-valuenow=&quot;25&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-meter-percentage: 25%&quot;)
+.ippon-meter(role=&quot;meter&quot; aria-valuenow=&quot;50&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-meter-percentage: 50%&quot;)
+.ippon-meter(role=&quot;meter&quot; aria-valuenow=&quot;75&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-meter-percentage: 75%&quot;)
+.ippon-meter(role=&quot;meter&quot; aria-valuenow=&quot;100&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-meter-percentage: 100%&quot;)
+.ippon-meter(role=&quot;meter&quot; aria-valuenow=&quot;150&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;200&quot; style=&quot;--ippon-meter-percentage: 75%&quot;)</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+.ippon-meter(role=&quot;meter&quot; aria-valuenow=&quot;0&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-meter-percentage: 0%&quot;)
+.ippon-meter(role=&quot;meter&quot; aria-valuenow=&quot;25&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-meter-percentage: 25%&quot;)
+.ippon-meter(role=&quot;meter&quot; aria-valuenow=&quot;50&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-meter-percentage: 50%&quot;)
+.ippon-meter(role=&quot;meter&quot; aria-valuenow=&quot;75&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-meter-percentage: 75%&quot;)
+.ippon-meter(role=&quot;meter&quot; aria-valuenow=&quot;100&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-meter-percentage: 100%&quot;)
+.ippon-meter(role=&quot;meter&quot; aria-valuenow=&quot;150&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;200&quot; style=&quot;--ippon-meter-percentage: 75%&quot;)">Copy</button></div></div></div></div></div><div class="tikui-vertical-spacing--line"><div class="tikui-component"><div class="tikui-component--markdown markdown"><h2 id="progress">Progress</h2>
+<p>A progress component to display the completion progress of a task.</p>
+<p><strong>Accessibility:</strong></p>
+<p>Uses ARIA <code>role="progressbar"</code> with <code>aria-valuenow</code>, <code>aria-valuemin</code>, and <code>aria-valuemax</code> attributes for proper accessibility support.</p></div><div class="tikui-component--render render"><iframe class="doc-iframe" src="../atom/progress/progress.render.html" height="150" title="Component rendering"></iframe></div><div class="tikui-component--code code"><div class="tikui-line-section -s24"><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-html">&lt;div class=&quot;ippon-progress&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;0&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; aria-busy=&quot;aria-busy&quot; style=&quot;--ippon-progress-percentage: 0%&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;ippon-progress&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;25&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; aria-busy=&quot;aria-busy&quot; style=&quot;--ippon-progress-percentage: 25%&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;ippon-progress&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;50&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; aria-busy=&quot;aria-busy&quot; style=&quot;--ippon-progress-percentage: 50%&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;ippon-progress&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;75&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; aria-busy=&quot;aria-busy&quot; style=&quot;--ippon-progress-percentage: 75%&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;ippon-progress&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;100&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-progress-percentage: 100%&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;ippon-progress&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;150&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;200&quot; aria-busy=&quot;aria-busy&quot; style=&quot;--ippon-progress-percentage: 75%&quot;&gt;&lt;/div&gt;</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+&lt;div class=&quot;ippon-progress&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;0&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; aria-busy=&quot;aria-busy&quot; style=&quot;--ippon-progress-percentage: 0%&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;ippon-progress&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;25&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; aria-busy=&quot;aria-busy&quot; style=&quot;--ippon-progress-percentage: 25%&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;ippon-progress&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;50&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; aria-busy=&quot;aria-busy&quot; style=&quot;--ippon-progress-percentage: 50%&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;ippon-progress&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;75&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; aria-busy=&quot;aria-busy&quot; style=&quot;--ippon-progress-percentage: 75%&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;ippon-progress&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;100&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-progress-percentage: 100%&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;ippon-progress&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;150&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;200&quot; aria-busy=&quot;aria-busy&quot; style=&quot;--ippon-progress-percentage: 75%&quot;&gt;&lt;/div&gt;">Copy</button></div><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-pug">.ippon-progress(role=&quot;progressbar&quot; aria-valuenow=&quot;0&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; aria-busy=&quot;aria-busy&quot; style=&quot;--ippon-progress-percentage: 0%&quot;)
+.ippon-progress(role=&quot;progressbar&quot; aria-valuenow=&quot;25&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; aria-busy=&quot;aria-busy&quot; style=&quot;--ippon-progress-percentage: 25%&quot;)
+.ippon-progress(role=&quot;progressbar&quot; aria-valuenow=&quot;50&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; aria-busy=&quot;aria-busy&quot; style=&quot;--ippon-progress-percentage: 50%&quot;)
+.ippon-progress(role=&quot;progressbar&quot; aria-valuenow=&quot;75&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; aria-busy=&quot;aria-busy&quot; style=&quot;--ippon-progress-percentage: 75%&quot;)
+.ippon-progress(role=&quot;progressbar&quot; aria-valuenow=&quot;100&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-progress-percentage: 100%&quot;)
+.ippon-progress(role=&quot;progressbar&quot; aria-valuenow=&quot;150&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;200&quot; aria-busy=&quot;aria-busy&quot; style=&quot;--ippon-progress-percentage: 75%&quot;)</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+.ippon-progress(role=&quot;progressbar&quot; aria-valuenow=&quot;0&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; aria-busy=&quot;aria-busy&quot; style=&quot;--ippon-progress-percentage: 0%&quot;)
+.ippon-progress(role=&quot;progressbar&quot; aria-valuenow=&quot;25&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; aria-busy=&quot;aria-busy&quot; style=&quot;--ippon-progress-percentage: 25%&quot;)
+.ippon-progress(role=&quot;progressbar&quot; aria-valuenow=&quot;50&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; aria-busy=&quot;aria-busy&quot; style=&quot;--ippon-progress-percentage: 50%&quot;)
+.ippon-progress(role=&quot;progressbar&quot; aria-valuenow=&quot;75&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; aria-busy=&quot;aria-busy&quot; style=&quot;--ippon-progress-percentage: 75%&quot;)
+.ippon-progress(role=&quot;progressbar&quot; aria-valuenow=&quot;100&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-progress-percentage: 100%&quot;)
+.ippon-progress(role=&quot;progressbar&quot; aria-valuenow=&quot;150&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;200&quot; aria-busy=&quot;aria-busy&quot; style=&quot;--ippon-progress-percentage: 75%&quot;)">Copy</button></div></div></div></div></div><div class="tikui-vertical-spacing--line"><div class="tikui-component"><div class="tikui-component--markdown markdown"><h2 id="tab">Tab</h2></div><div class="tikui-component--render render"><iframe class="doc-iframe" src="../atom/tab/tab.render.html" height="60" title="Component rendering"></iframe></div><div class="tikui-component--code code"><div class="tikui-line-section -s24"><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-html">&lt;button class=&quot;ippon-tab&quot; role=&quot;tab&quot; id=&quot;tab-1&quot; aria-controls=&quot;panel-id&quot;&gt;Tab 1
+&lt;/button&gt;
+&lt;button class=&quot;ippon-tab&quot; role=&quot;tab&quot; id=&quot;tab-2&quot; aria-controls=&quot;panel-id&quot; aria-selected=&quot;true&quot; tabindex=&quot;-1&quot;&gt;Tab 2
+&lt;/button&gt;
+&lt;a class=&quot;ippon-tab&quot; role=&quot;tab&quot; id=&quot;tab-3&quot; aria-controls=&quot;panel-id&quot; href=&quot;#tab3&quot;&gt;Tab 3
+&lt;/a&gt;</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+&lt;button class=&quot;ippon-tab&quot; role=&quot;tab&quot; id=&quot;tab-1&quot; aria-controls=&quot;panel-id&quot;&gt;Tab 1
+&lt;/button&gt;
+&lt;button class=&quot;ippon-tab&quot; role=&quot;tab&quot; id=&quot;tab-2&quot; aria-controls=&quot;panel-id&quot; aria-selected=&quot;true&quot; tabindex=&quot;-1&quot;&gt;Tab 2
+&lt;/button&gt;
+&lt;a class=&quot;ippon-tab&quot; role=&quot;tab&quot; id=&quot;tab-3&quot; aria-controls=&quot;panel-id&quot; href=&quot;#tab3&quot;&gt;Tab 3
+&lt;/a&gt;">Copy</button></div><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-pug">button#tab-1.ippon-tab(role=&quot;tab&quot; aria-controls=&quot;panel-id&quot;)
+  | Tab 1
+button#tab-2.ippon-tab(role=&quot;tab&quot; aria-controls=&quot;panel-id&quot; aria-selected=&quot;true&quot; tabindex=&quot;-1&quot;)
+  | Tab 2
+a#tab-3.ippon-tab(role=&quot;tab&quot; aria-controls=&quot;panel-id&quot; href=&quot;#tab3&quot;)
+  | Tab 3</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+button#tab-1.ippon-tab(role=&quot;tab&quot; aria-controls=&quot;panel-id&quot;)
+  | Tab 1
+button#tab-2.ippon-tab(role=&quot;tab&quot; aria-controls=&quot;panel-id&quot; aria-selected=&quot;true&quot; tabindex=&quot;-1&quot;)
+  | Tab 2
+a#tab-3.ippon-tab(role=&quot;tab&quot; aria-controls=&quot;panel-id&quot; href=&quot;#tab3&quot;)
+  | Tab 3">Copy</button></div></div></div></div></div><div class="tikui-vertical-spacing--line"><div class="tikui-component"><div class="tikui-component--markdown markdown"><h2 id="text">Text</h2>
+<p><strong>Placeholder (Loading State)</strong></p>
+<p>The <code>-placeholder</code> alternative displays a shimmer animation, typically used during content loading.</p></div><div class="tikui-component--render render"><iframe class="doc-iframe" src="../atom/text/text.render.html" height="220" title="Component rendering"></iframe></div><div class="tikui-component--code code"><div class="tikui-line-section -s24"><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-html">&lt;span class=&quot;ippon-text -small -body&quot;&gt;Body Small
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -small -body -bold&quot;&gt;Body Small bold
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -body&quot;&gt;Body Medium
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -body -bold&quot;&gt;Body Medium bold
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -large -body&quot;&gt;Body Large
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -large -body -bold&quot;&gt;Body Large bold
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -small -label&quot;&gt;Label Small
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -small -label -bold&quot;&gt;Label Small bold
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -label&quot;&gt;Label Medium
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -label -bold&quot;&gt;Label Medium bold
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -large -label&quot;&gt;Label Large
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -large -label -bold&quot;&gt;Label Large bold
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -body -color-neutral-tertiary-inversed&quot;&gt;Color Neutral Tertiary Inversed
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -small -body -placeholder&quot;&gt;
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -body -placeholder&quot;&gt;
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -large -body -placeholder&quot;&gt;
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -label -placeholder&quot;&gt;
+&lt;/span&gt;</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+&lt;span class=&quot;ippon-text -small -body&quot;&gt;Body Small
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -small -body -bold&quot;&gt;Body Small bold
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -body&quot;&gt;Body Medium
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -body -bold&quot;&gt;Body Medium bold
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -large -body&quot;&gt;Body Large
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -large -body -bold&quot;&gt;Body Large bold
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -small -label&quot;&gt;Label Small
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -small -label -bold&quot;&gt;Label Small bold
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -label&quot;&gt;Label Medium
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -label -bold&quot;&gt;Label Medium bold
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -large -label&quot;&gt;Label Large
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -large -label -bold&quot;&gt;Label Large bold
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -body -color-neutral-tertiary-inversed&quot;&gt;Color Neutral Tertiary Inversed
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -small -body -placeholder&quot;&gt;
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -body -placeholder&quot;&gt;
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -large -body -placeholder&quot;&gt;
+&lt;/span&gt;
+&lt;span class=&quot;ippon-text -label -placeholder&quot;&gt;
+&lt;/span&gt;">Copy</button></div><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-pug">span.ippon-text.-small.-body Body Small
+span.ippon-text.-small.-body.-bold Body Small bold
+span.ippon-text.-body Body Medium
+span.ippon-text.-body.-bold Body Medium bold
+span.ippon-text.-large.-body Body Large
+span.ippon-text.-large.-body.-bold Body Large bold
+span.ippon-text.-small.-label Label Small
+span.ippon-text.-small.-label.-bold Label Small bold
+span.ippon-text.-label Label Medium
+span.ippon-text.-label.-bold Label Medium bold
+span.ippon-text.-large.-label Label Large
+span.ippon-text.-large.-label.-bold Label Large bold
+span.ippon-text.-body.-color-neutral-tertiary-inversed Color Neutral Tertiary Inversed
+span.ippon-text.-small.-body.-placeholder
+span.ippon-text.-body.-placeholder
+span.ippon-text.-large.-body.-placeholder
+span.ippon-text.-label.-placeholder</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+span.ippon-text.-small.-body Body Small
+span.ippon-text.-small.-body.-bold Body Small bold
+span.ippon-text.-body Body Medium
+span.ippon-text.-body.-bold Body Medium bold
+span.ippon-text.-large.-body Body Large
+span.ippon-text.-large.-body.-bold Body Large bold
+span.ippon-text.-small.-label Label Small
+span.ippon-text.-small.-label.-bold Label Small bold
+span.ippon-text.-label Label Medium
+span.ippon-text.-label.-bold Label Medium bold
+span.ippon-text.-large.-label Label Large
+span.ippon-text.-large.-label.-bold Label Large bold
+span.ippon-text.-body.-color-neutral-tertiary-inversed Color Neutral Tertiary Inversed
+span.ippon-text.-small.-body.-placeholder
+span.ippon-text.-body.-placeholder
+span.ippon-text.-large.-body.-placeholder
+span.ippon-text.-label.-placeholder">Copy</button></div></div></div></div></div><div class="tikui-vertical-spacing--line"><div class="tikui-component"><div class="tikui-component--markdown markdown"><h2 id="title">Title</h2>
+<p>The <code>title</code> will have an associated size depending on the heading level (e.g., <code>h1</code>, <code>h2</code>, …).</p>
+<p>Alternatives classes can be used to change the <strong>level</strong> using alternative classes (e.g., <code>-l1</code>, <code>-l2</code>, …).</p>
+<p><strong>Placeholder (Loading State)</strong></p>
+<p>The <code>-placeholder</code> alternative displays a shimmer animation, typically used during content loading.</p></div><div class="tikui-component--render render"><iframe class="doc-iframe" src="../atom/title/title.render.html" height="1050" title="Component rendering"></iframe></div><div class="tikui-component--code code"><div class="tikui-line-section -s24"><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-html">&lt;h1 class=&quot;ippon-title&quot;&gt;Title h1
+&lt;/h1&gt;
+&lt;h2 class=&quot;ippon-title&quot;&gt;Title h2
+&lt;/h2&gt;
+&lt;h3 class=&quot;ippon-title&quot;&gt;Title h3
+&lt;/h3&gt;
+&lt;h4 class=&quot;ippon-title&quot;&gt;Title h4
+&lt;/h4&gt;
+&lt;h5 class=&quot;ippon-title&quot;&gt;Title h5
+&lt;/h5&gt;
+&lt;h2 class=&quot;ippon-title -l1&quot;&gt;Title h2 (alternative level 1)
+&lt;/h2&gt;
+&lt;h1 class=&quot;ippon-title -l2&quot;&gt;Title h1 (alternative level 2)
+&lt;/h1&gt;
+&lt;h5 class=&quot;ippon-title -l3&quot;&gt;Title h5 (alternative level 3)
+&lt;/h5&gt;
+&lt;h2 class=&quot;ippon-title -l4&quot;&gt;Title h2 (alternative level 4)
+&lt;/h2&gt;
+&lt;h3 class=&quot;ippon-title -l5&quot;&gt;Title h3 (alternative level 5)
+&lt;/h3&gt;
+&lt;h1 class=&quot;ippon-title -placeholder&quot;&gt;
+&lt;/h1&gt;
+&lt;h2 class=&quot;ippon-title -placeholder&quot;&gt;
+&lt;/h2&gt;
+&lt;h3 class=&quot;ippon-title -placeholder&quot;&gt;
+&lt;/h3&gt;
+&lt;h4 class=&quot;ippon-title -placeholder&quot;&gt;
+&lt;/h4&gt;
+&lt;h5 class=&quot;ippon-title -placeholder&quot;&gt;
+&lt;/h5&gt;
+&lt;h2 class=&quot;ippon-title -l1 -placeholder&quot;&gt;
+&lt;/h2&gt;
+&lt;h1 class=&quot;ippon-title -l2 -placeholder&quot;&gt;
+&lt;/h1&gt;
+&lt;h5 class=&quot;ippon-title -l3 -placeholder&quot;&gt;
+&lt;/h5&gt;
+&lt;h2 class=&quot;ippon-title -l4 -placeholder&quot;&gt;
+&lt;/h2&gt;
+&lt;h3 class=&quot;ippon-title -l5 -placeholder&quot;&gt;
+&lt;/h3&gt;</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+&lt;h1 class=&quot;ippon-title&quot;&gt;Title h1
+&lt;/h1&gt;
+&lt;h2 class=&quot;ippon-title&quot;&gt;Title h2
+&lt;/h2&gt;
+&lt;h3 class=&quot;ippon-title&quot;&gt;Title h3
+&lt;/h3&gt;
+&lt;h4 class=&quot;ippon-title&quot;&gt;Title h4
+&lt;/h4&gt;
+&lt;h5 class=&quot;ippon-title&quot;&gt;Title h5
+&lt;/h5&gt;
+&lt;h2 class=&quot;ippon-title -l1&quot;&gt;Title h2 (alternative level 1)
+&lt;/h2&gt;
+&lt;h1 class=&quot;ippon-title -l2&quot;&gt;Title h1 (alternative level 2)
+&lt;/h1&gt;
+&lt;h5 class=&quot;ippon-title -l3&quot;&gt;Title h5 (alternative level 3)
+&lt;/h5&gt;
+&lt;h2 class=&quot;ippon-title -l4&quot;&gt;Title h2 (alternative level 4)
+&lt;/h2&gt;
+&lt;h3 class=&quot;ippon-title -l5&quot;&gt;Title h3 (alternative level 5)
+&lt;/h3&gt;
+&lt;h1 class=&quot;ippon-title -placeholder&quot;&gt;
+&lt;/h1&gt;
+&lt;h2 class=&quot;ippon-title -placeholder&quot;&gt;
+&lt;/h2&gt;
+&lt;h3 class=&quot;ippon-title -placeholder&quot;&gt;
+&lt;/h3&gt;
+&lt;h4 class=&quot;ippon-title -placeholder&quot;&gt;
+&lt;/h4&gt;
+&lt;h5 class=&quot;ippon-title -placeholder&quot;&gt;
+&lt;/h5&gt;
+&lt;h2 class=&quot;ippon-title -l1 -placeholder&quot;&gt;
+&lt;/h2&gt;
+&lt;h1 class=&quot;ippon-title -l2 -placeholder&quot;&gt;
+&lt;/h1&gt;
+&lt;h5 class=&quot;ippon-title -l3 -placeholder&quot;&gt;
+&lt;/h5&gt;
+&lt;h2 class=&quot;ippon-title -l4 -placeholder&quot;&gt;
+&lt;/h2&gt;
+&lt;h3 class=&quot;ippon-title -l5 -placeholder&quot;&gt;
+&lt;/h3&gt;">Copy</button></div><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-pug">h1.ippon-title Title h1
+h2.ippon-title Title h2
+h3.ippon-title Title h3
+h4.ippon-title Title h4
+h5.ippon-title Title h5
+h2.ippon-title.-l1 Title h2 (alternative level 1)
+h1.ippon-title.-l2 Title h1 (alternative level 2)
+h5.ippon-title.-l3 Title h5 (alternative level 3)
+h2.ippon-title.-l4 Title h2 (alternative level 4)
+h3.ippon-title.-l5 Title h3 (alternative level 5)
+h1.ippon-title.-placeholder
+h2.ippon-title.-placeholder
+h3.ippon-title.-placeholder
+h4.ippon-title.-placeholder
+h5.ippon-title.-placeholder
+h2.ippon-title.-l1.-placeholder
+h1.ippon-title.-l2.-placeholder
+h5.ippon-title.-l3.-placeholder
+h2.ippon-title.-l4.-placeholder
+h3.ippon-title.-l5.-placeholder</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+h1.ippon-title Title h1
+h2.ippon-title Title h2
+h3.ippon-title Title h3
+h4.ippon-title Title h4
+h5.ippon-title Title h5
+h2.ippon-title.-l1 Title h2 (alternative level 1)
+h1.ippon-title.-l2 Title h1 (alternative level 2)
+h5.ippon-title.-l3 Title h5 (alternative level 3)
+h2.ippon-title.-l4 Title h2 (alternative level 4)
+h3.ippon-title.-l5 Title h3 (alternative level 5)
+h1.ippon-title.-placeholder
+h2.ippon-title.-placeholder
+h3.ippon-title.-placeholder
+h4.ippon-title.-placeholder
+h5.ippon-title.-placeholder
+h2.ippon-title.-l1.-placeholder
+h1.ippon-title.-l2.-placeholder
+h5.ippon-title.-l3.-placeholder
+h2.ippon-title.-l4.-placeholder
+h3.ippon-title.-l5.-placeholder">Copy</button></div></div></div></div></div><div class="tikui-vertical-spacing--line"><div class="tikui-component"><div class="tikui-component--markdown markdown"><h2 id="titledisplay">Title display</h2>
+<p>The <code>title-display</code> will have an associated size depending on the heading level (e.g., <code>h1</code>, <code>h2</code>, …).</p>
+<p>Alternatives classes can be used to change the size using alternative classes (e.g., <code>-large</code>, <code>-medium</code>, …).</p></div><div class="tikui-component--render render"><iframe class="doc-iframe" src="../atom/title-display/title-display.render.html" height="350" title="Component rendering"></iframe></div><div class="tikui-component--code code"><div class="tikui-line-section -s24"><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-html">&lt;h1 class=&quot;ippon-title-display&quot;&gt;Title display h1&lt;/h1&gt;
+&lt;h2 class=&quot;ippon-title-display&quot;&gt;Title display h2&lt;/h2&gt;
+&lt;h3 class=&quot;ippon-title-display&quot;&gt;Title display h3&lt;/h3&gt;
+&lt;h2 class=&quot;ippon-title-display -large&quot;&gt;Title display h2 (alternative large)&lt;/h2&gt;
+&lt;h1 class=&quot;ippon-title-display -medium&quot;&gt;Title display h1 (alternative medium)&lt;/h1&gt;
+&lt;h5 class=&quot;ippon-title-display -small&quot;&gt;Title display h5 (alternative small)&lt;/h5&gt;</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+&lt;h1 class=&quot;ippon-title-display&quot;&gt;Title display h1&lt;/h1&gt;
+&lt;h2 class=&quot;ippon-title-display&quot;&gt;Title display h2&lt;/h2&gt;
+&lt;h3 class=&quot;ippon-title-display&quot;&gt;Title display h3&lt;/h3&gt;
+&lt;h2 class=&quot;ippon-title-display -large&quot;&gt;Title display h2 (alternative large)&lt;/h2&gt;
+&lt;h1 class=&quot;ippon-title-display -medium&quot;&gt;Title display h1 (alternative medium)&lt;/h1&gt;
+&lt;h5 class=&quot;ippon-title-display -small&quot;&gt;Title display h5 (alternative small)&lt;/h5&gt;">Copy</button></div><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-pug">h1.ippon-title-display Title display h1
+h2.ippon-title-display Title display h2
+h3.ippon-title-display Title display h3
+h2.ippon-title-display.-large Title display h2 (alternative large)
+h1.ippon-title-display.-medium Title display h1 (alternative medium)
+h5.ippon-title-display.-small Title display h5 (alternative small)</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+h1.ippon-title-display Title display h1
+h2.ippon-title-display Title display h2
+h3.ippon-title-display Title display h3
+h2.ippon-title-display.-large Title display h2 (alternative large)
+h1.ippon-title-display.-medium Title display h1 (alternative medium)
+h5.ippon-title-display.-small Title display h5 (alternative small)">Copy</button></div></div></div></div></div></div></div></div></div></div><script src="../lib/prismjs/prism.js"></script><script src="../lib/prismjs/prism-pug.js"></script><script src="../documentation/scripts/tikui.js"></script></body></html>