🚧 Under Construction

This component documentation is currently being developed. Some features may be incomplete.

Button Colors

View in Pattern Lab

HTML Markup

<ul class="sg-colors">
    <li class="sg-swatch"><span class="sg-label">
        <stong class="sg-label-big">neutral-000</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--buttonBackground);"></span><span class="sg-label"><strong>SASS:</strong>&nbsp;$neutral-000<br><em><strong>Fluent UI:</strong>&nbsp; / buttonBackground</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
    <stong class="sg-label-big">neutral-100</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--buttonBackgroundDisabled);"></span><span class="sg-label"><strong>SASS:</strong>&nbsp;$neutral-100<br><em><strong>Fluent UI:</strong>&nbsp;buttonBackgroundDisabled / Button Background Disabled</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
    <stong class="sg-label-big">neutral-100</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--buttonBackgroundHovered);"></span><span class="sg-label"><strong>SASS:</strong>&nbsp;$neutral-100<br><em><strong>Fluent UI:</strong>&nbsp;Button Background Hovered / buttonBackgroundHovered</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
    <stong class="sg-label-big">neutral-100</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--buttonBorderDisabled);"></span><span class="sg-label"><strong>SASS:</strong>&nbsp;$neutral-100<br><em><strong>Fluent UI:</strong>&nbsp;buttonBorderDisabled / buttonBorderDisabled</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
    <stong class="sg-label-big">neutral-200</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--buttonBackgroundPressed);"></span><span class="sg-label"><strong>SASS:</strong>&nbsp;$neutral-200<br><em><strong>Fluent UI:</strong>&nbsp;Button Background Pressed / buttonBackgroundPressed</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
    <stong class="sg-label-big">neutral-200</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--buttonBackgroundCheckedHovered);"></span><span class="sg-label"><strong>SASS:</strong>&nbsp;$neutral-200<br><em><strong>Fluent UI:</strong>&nbsp;Button Background Checked Hovered / buttonBackgroundCheckedHovered</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
    <stong class="sg-label-big">neutral-350</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--buttonBackgroundChecked);"></span><span class="sg-label"><strong>SASS:</strong>&nbsp;$neutral-350<br><em><strong>Fluent UI:</strong>&nbsp;buttonBackgroundChecked / buttonBackgroundChecked</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
    <stong class="sg-label-big">neutral-400</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--buttonTextDisabled);"></span><span class="sg-label"><strong>SASS:</strong>&nbsp;$neutral-400<br><em><strong>Fluent UI:</strong>&nbsp;Button Text Disabled / buttonTextDisabled</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
    <stong class="sg-label-big">neutral-450</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--buttonBorder);"></span><span class="sg-label"><strong>SASS:</strong>&nbsp;$neutral-450<br><em><strong>Fluent UI:</strong>&nbsp;Button Border / buttonBorder</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
    <stong class="sg-label-big">neutral-700</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--buttonText);"></span><span class="sg-label"><strong>SASS:</strong>&nbsp;$neutral-700<br><em><strong>Fluent UI:</strong>&nbsp;Button Text / buttonText</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
    <stong class="sg-label-big">neutral-800</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--buttonTextChecked);"></span><span class="sg-label"><strong>SASS:</strong>&nbsp;$neutral-800<br><em><strong>Fluent UI:</strong>&nbsp;Button Text Checked / buttonTextChecked</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
    <stong class="sg-label-big">neutral-800</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--buttonTextHovered);"></span><span class="sg-label"><strong>SASS:</strong>&nbsp;$neutral-800<br><em><strong>Fluent UI:</strong>&nbsp;Button Text Hovered / buttonTextHovered</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
    <stong class="sg-label-big">neutral-800</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--buttonTextPressed);"></span><span class="sg-label"><strong>SASS:</strong>&nbsp;$neutral-800<br><em><strong>Fluent UI:</strong>&nbsp;Button Text Pressed / buttonTextPressed</em><br></span>
</li>
<li class="sg-swatch"><span class="sg-label">
    <stong class="sg-label-big">neutral-900</stong><br><span class="sg-color-code"></span><br></span><span class="sg-swatchbox" style="background: var(--buttonTextCheckedHovered);"></span><span class="sg-label"><strong>SASS:</strong>&nbsp;$neutral-900<br><em><strong>Fluent UI:</strong>&nbsp;buttonTextCheckedHovered / buttonTextCheckedHovered</em><br></span>
</li>
</ul>
<!--end sg-colors--><small>To add to these items, use Sass variables that start with<code>$color-brand-</code>in<code>./source/css/scss/abstracts/_variables.scss</code></small>