Buttons are one of the most common and basic user interface elements. Buttons supports four appearances: text, outlined, tonal, and filled; and three colors: primary, error, and neutral. Combining appearances and colors gives you 12 different variants. By default, a button has no color. To add colors, you can use CSS classes like flexy-button--primary or flexy-button--tonal-primary.
<div class="flex-row">
<button class="flexy-button">Text</button>
<button class="flexy-button flexy-button--tonal-neutral">Tonal</button>
<button class="flexy-button flexy-button--outlined-neutral">Outlined</button>
<button class="flexy-button flexy-button--filled-neutral">Filled</button>
</div>
Primary Buttons
Error Buttons
Neutral Buttons
<div class="flex-column">
<p>Primary Buttons</p>
<div class="flex-row">
<button class="flexy-button flexy-button--primary">Button</button>
<button class="flexy-button flexy-button--outlined-primary">Button</button>
<button class="flexy-button flexy-button--tonal-primary">Button</button>
<button class="flexy-button flexy-button--filled-primary">Button</button>
</div>
<hr />
<p>Error Buttons</p>
<div class="flex-row">
<button class="flexy-button flexy-button--error">Button</button>
<button class="flexy-button flexy-button--outlined-error">Button</button>
<button class="flexy-button flexy-button--tonal-error">Button</button>
<button class="flexy-button flexy-button--filled-error">Button</button>
</div>
<hr />
<p>Neutral Buttons</p>
<div class="flex-row">
<button class="flexy-button flexy-button--neutral">Button</button>
<button class="flexy-button flexy-button--outlined-neutral">Button</button>
<button class="flexy-button flexy-button--tonal-neutral">Button</button>
<button class="flexy-button flexy-button--filled-neutral">Button</button>
</div>
<hr style="margin-bottom: 0px;" />
</div>
Supported Sizes: xxs, xs, sm, lg, xl, xxl
<div class="flex-row">
<button class="flexy-button flexy-button--filled-neutral flexy-button--xxs">
<span>Smallest</span>
</button>
<button class="flexy-button flexy-button--filled-neutral flexy-button--xs">
<span>Smaller</span>
</button>
<button class="flexy-button flexy-button--filled-neutral flexy-button--sm">
<span>Small</span>
</button>
<button class="flexy-button flexy-button--filled-neutral">
<span>Medium</span>
</button>
<button class="flexy-button flexy-button--filled-neutral flexy-button--lg">
<span>Large</span>
</button>
<button class="flexy-button flexy-button--filled-neutral flexy-button--xl">
<span>Larger</span>
</button>
<button class="flexy-button flexy-button--filled-neutral flexy-button--xxl">
<span>Largest</span>
</button>
</div>
<button class="flexy-button flexy-button--filled-neutral">
<span class="material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="build"><path d="M360-360q-100 0-170-70t-70-170q0-20 3-40t11-38q5-10 12.5-15t16.5-7q9-2 18.5.5T199-689l105 105 72-72-105-105q-8-8-10.5-17.5T260-797q2-9 7-16.5t15-12.5q18-8 38-11t40-3q100 0 170 70t70 170q0 23-4 43.5T584-516l202 200q29 29 29 71t-29 71q-29 29-71 29t-71-30L444-376q-20 8-40.5 12t-43.5 4Zm0-80q26 0 52-8t47-25l243 243q5 5 13.5 4.5T729-231q5-5 5-13.5t-5-13.5L486-500q18-20 26-46.5t8-53.5q0-60-38.5-104.5T386-758l74 74q12 12 12 28t-12 28L332-500q-12 12-28 12t-28-12l-74-74q9 57 53.5 95.5T360-440Zm109-51Z"/></svg>
</span>
<span>Build</span>
</button>
<div class="flex-row">
<button class="flexy-button flexy-button--icon">
<span class="material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="build"><path d="M360-360q-100 0-170-70t-70-170q0-20 3-40t11-38q5-10 12.5-15t16.5-7q9-2 18.5.5T199-689l105 105 72-72-105-105q-8-8-10.5-17.5T260-797q2-9 7-16.5t15-12.5q18-8 38-11t40-3q100 0 170 70t70 170q0 23-4 43.5T584-516l202 200q29 29 29 71t-29 71q-29 29-71 29t-71-30L444-376q-20 8-40.5 12t-43.5 4Zm0-80q26 0 52-8t47-25l243 243q5 5 13.5 4.5T729-231q5-5 5-13.5t-5-13.5L486-500q18-20 26-46.5t8-53.5q0-60-38.5-104.5T386-758l74 74q12 12 12 28t-12 28L332-500q-12 12-28 12t-28-12l-74-74q9 57 53.5 95.5T360-440Zm109-51Z"/></svg>
</span>
</button>
<button class="flexy-button flexy-button--icon">
<span class="material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="search"><path d="M380-320q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>
</span>
</button>
</div>
flexy-buttonflexy-button--primaryflexy-button--errorflexy-button--tonal-neutralflexy-button--tontal-primaryflexy-button--tonal-errorflexy-button--outlined-neutralflexy-button--outlined-primaryflexy-button--outlined-errorflexy-button--filled-neutralflexy-button--filled-primaryflexy-button--filled-errorflexy-button--iconflexy-button--circularflexy-button--roundedflexy-button--sharpflexy-button--xxsflexy-button--xsflexy-button--smflexy-button--lgflexy-button--xlflexy-button--xxlheightlabel-sizepaddingshapespacingLast modified: Oct 19, 2025: refactor(docs): Reorganize the folder structure of component examples (8271c2e)