4 #Button Button
4.1 #Button.action action Button
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button.-action
Html
<button class="sf-button -action">action Default Button</button>
<button class="sf-button -action" disabled>Disabled action Default Button</button>
4.2 #Button.action-large action large Button
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button.-large.-action
Html
<button class="sf-button -action -large">action large Default Button</button>
<button class="sf-button -action -large" disabled>Disabled action large Default Button</button>
4.3 #Button.action-small action small Button
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button.-small.-action
Html
<button class="sf-button -action -small">action small Default Button</button>
<button class="sf-button -action -small" disabled>Disabled action small Default Button</button>
4.4 #Button.button-group Button group
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button-group
Html
<div class="sf-button-group">
<button class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-sitemap sf-button__icon"></i></button>
<button class="sf-button -active -icon -toggle"><i class="sf-icon sf-fa sf-fa-filter sf-button__icon"></i></button>
<button class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-cog sf-button__icon"></i></button>
<button class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-lightbulb-o sf-button__icon"></i></button>
<button class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-th-list sf-button__icon"></i></button>
</div>
4.5 #Button.circle-icon-small Circled Icon with small font size
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button.-txt-small.-circle
Html
<button class="sf-button -txt-small -small -circle">+4</button>
<br>
<a class="sf-button -txt-small -small -circle">+4</a>
4.6 #Button.default Default Button
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button
Html
<button class="sf-button">Default Button</button>
<button class="sf-button" disabled>Disabled Default Button</button>
<a class="sf-button">Default Button</a>
<a class="sf-button -disabled">Disabled Default Button</a>
4.7 #Button.delete delete Button
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button.-delete
Html
<button class="sf-button -delete">delete Default Button</button>
<button class="sf-button -delete" disabled>Disabled delete Default Button</button>
4.8 #Button.delete-large delete large Button
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button.-large.-delete
Html
<button class="sf-button -delete -large">delete large Default Button</button>
<button class="sf-button -delete -large" disabled>Disabled delete large Default Button</button>
4.9 #Button.delete-small delete small Button
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button.-small.-delete
Html
<button class="sf-button -delete -small">delete small Default Button</button>
<button class="sf-button -delete -small" disabled>Disabled delete small Default Button</button>
4.10 #Button.dropdown Dropdown button without border
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button.-no-border
Html
<div style="height: 150px; padding-left: 160px;">
<button type="button" class="sf-button -no-border -icon -dropdown -dropped">
<i class="sf-button__icon sf-icon sf-fa sf-fa-ellipsis-h -size-m" title="Actions"></i>
<div class="sf-button__dropdown">
<div class="sf-dropdown">
<div class="sf-dropdown__heading">
Edit
</div>
<div class="sf-dropdown__item -active">
Default News
</div>
<div class="sf-dropdown__item">
test News
</div>
<div class="sf-dropdown__separator">
</div>
<div class="sf-dropdown__item -sf-txt-failure">
Delete
</div>
</div>
</div>
</button>
</div>
4.11 #Button.dropdown-color-picker Dropdown as color picker
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
Html
<a class="sf-button -large -left -angled -sf-pr-5xs -no-hover -icon -dropdown -dropped" aria-expanded="true" aria-haspopup="true" role="listbox" tabindex="0" >
<span class="sf-button__content">
<i class="sf-badge -sf-m-4xs -size-l -square" style="background-color: rgb(220, 236, 245);"></i>
</span>
<i class="sf-button__icon sf-icon sf-fa sf-fa-caret-down -size-m"></i>
<div class="sf-button__dropdown">
<div class="sf-dropdown -narrow" >
<div class="sf-color-palette" style="grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;">
<div class="sf-color-palette__item" style="background-color: rgb(255, 173, 173);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(255, 164, 225);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(245, 154, 255);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(139, 244, 255);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(146, 255, 251);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(158, 255, 201);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(255, 255, 174);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(255, 235, 141);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(228, 207, 197);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(220, 236, 245);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(255, 122, 123);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(255, 113, 173);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(194, 103, 220);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(87, 193, 255);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(95, 208, 200);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(107, 222, 150);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(255, 255, 123);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(255, 184, 90);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(177, 157, 146);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(169, 185, 194);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(255, 72, 72);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(220, 62, 123);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(143, 52, 169);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(35, 142, 252);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(44, 157, 149);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(56, 171, 99);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(255, 224, 72);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(237, 133, 39);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(126, 106, 95);"></div>
<div class="sf-color-palette__item" style="background-color: rgb(118, 134, 143);"></div>
</div>
</div>
</div>
</a>
4.12 #Button.dropdown-with-icon-text Dropdown button with icon and text
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
Html
<div style="height: 120px;">
<a class="sf-button -no-border -left -icon -dropdown -dropped">
<span>Default News</span>
<i class="sf-button__icon sf-icon sf-fa sf-fa-caret-down -size-xs"></i>
<div class="sf-button__dropdown">
<div class="sf-dropdown">
<div class="sf-dropdown__item -active">
Default News
</div>
<div class="sf-dropdown__item">
test News
</div>
</div>
</div>
</a>
</div>
4.13 #Button.feedback-icon Button with Feedback Icon
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button.-feedback
Html
<button class="sf-button -feedback"><div class="sf-button__content">Feedback Button</div><i class="sf-button__icon sf-fa sf-fa-check sf-icon"></i></button>
<button class="sf-button -feedback -done"><div class="sf-button__content">Feedback Button</div><i class="sf-button__icon sf-fa sf-fa-check sf-icon"></i></button>
4.14 #Button.filter-button-group Filter Button Group
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button-group
Html
<div class="sf-button-group -search">
<i class="sf-fa sf-fa-search sf-icon -size-s -light"></i>
<div class="sf-input -clearable">
<input type="text" class="sf-input__field" placeholder="Narrow by typing..." />
<span class="sf-input__clear-button">
<i class="sf-icon sf-fa sf-fa-times -size-3xs"></i>
</span>
</div>
</div>
<div class="sf-button-group -search">
<i class="sf-fa sf-fa-search sf-icon -size-s -light"></i>
<div class="sf-input -clearable">
<input type="text" class="sf-input__field" placeholder="Narrow by typing..." />
<span class="sf-input__clear-button -show">
<i class="sf-icon sf-fa sf-fa-times -size-3xs"></i>
</span>
</div>
</div>
4.15 #Button.icon Icon Button
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button.-icon
Html
<button class="sf-button -icon"><i class="sf-icon -size-xs sf-fa sf-fa-sliders sf-button__icon"></i></button>
<button class="sf-button -icon" disabled><i class="sf-icon -size-xs sf-fa sf-fa-sliders sf-button__icon"></i></button>
<button class="sf-button -action -icon"><i class="sf-icon -size-xs sf-fa sf-fa-sliders sf-button__icon"></i></button>
<button class="sf-button -action -icon" disabled><i class="sf-icon -size-xs sf-fa sf-fa-sliders sf-button__icon"></i></button>
<br>
<a class="sf-button -icon"><i class="sf-icon -size-xs sf-fa sf-fa-sliders sf-button__icon"></i></a>
<a class="sf-button -icon -disabled"><i class="sf-icon -size-xs sf-fa sf-fa-sliders sf-button__icon"></i></a>
4.16 #Button.icon-button Circled Icon Button
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button.-icon.-circle
Html
<button class="sf-button -icon -circle"><i class="sf-icon -size-xs sf-fa sf-fa-plus sf-button__icon"></i></button>
<button class="sf-button -icon -circle" disabled><i class="sf-icon -size-xs sf-fa sf-fa-times sf-button__icon"></i></button>
<button class="sf-button -icon -circle -small"><i class="sf-icon -size-xs sf-fa sf-fa-times sf-button__icon"></i></button>
<br>
<a class="sf-button -icon -circle"><i class="sf-icon -size-xs sf-fa sf-fa-plus sf-button__icon"></i></a>
<a class="sf-button -icon -circle -disabled"><i class="sf-icon -size-xs sf-fa sf-fa-times sf-button__icon"></i></a>
<a class="sf-button -icon -circle -small"><i class="sf-icon -size-xs sf-fa sf-fa-times sf-button__icon"></i></a>
4.17 #Button.invert invert Button
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button.-invert
Html
<button class="sf-button -invert">invert Default Button</button>
<button class="sf-button -invert" disabled>Disabled invert Default Button</button>
4.18 #Button.invert-large invert large Button
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button.-large.-invert
Html
<button class="sf-button -invert -large">invert large Default Button</button>
<button class="sf-button -invert -large" disabled>Disabled invert large Default Button</button>
4.19 #Button.invert-small invert small Button
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button.-small.-invert
Html
<button class="sf-button -invert -small">invert small Default Button</button>
<button class="sf-button -invert -small" disabled>Disabled invert small Default Button</button>
4.20 #Button.large large Button
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button.-large
Html
<button class="sf-button -large">large Default Button</button>
<button class="sf-button -large" disabled>Disabled large Default Button</button>
4.21 #Button.link link Button
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button.-link
Html
<button class="sf-button -link">link Default Button</button>
<button class="sf-button -link" disabled>Disabled link Default Button</button>
4.22 #Button.link-large link large Button
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button.-large.-link
Html
<button class="sf-button -link -large">link large Default Button</button>
<button class="sf-button -link -large" disabled>Disabled link large Default Button</button>
4.23 #Button.link-small link small Button
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button.-small.-link
Html
<button class="sf-button -link -small">link small Default Button</button>
<button class="sf-button -link -small" disabled>Disabled link small Default Button</button>
4.24 #Button.loader Dropdown button
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button
Html
<div style="height: 150px; padding-left: 160px;">
<button type="button" class="sf-button -icon -dropdown -dropped">
<i class="sf-button__icon sf-icon sf-fa sf-fa-ellipsis-h -size-m" title="Actions"></i>
<div class="sf-button__dropdown">
<div class="sf-dropdown">
<div class="sf-dropdown__heading">
Edit
</div>
<div class="sf-dropdown__item -active">
Default News
</div>
<div class="sf-dropdown__item">
News items<span class="sf-dropdown__counter -positive">14</span>
</div>
<div class="sf-dropdown__separator">
</div>
<div class="sf-dropdown__item -sf-txt-failure">
Delete
</div>
</div>
</div>
</button>
</div>
4.25 #Button.search-button-group Search Button Group `.sf-button-group`
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
Html
<div class="sf-button-group -search">
<div class="sf-input">
<input type="text" class="sf-input__field" placeholder="Search..." />
</div>
<button class="sf-button -icon">
<i class="sf-fa sf-fa-search sf-icon -size-s sf-button__icon"></i>
</button>
</div>
4.26 #Button.sidebar-tree sidebar-tree Button
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button.-sidebar-tree
Html
<button class="sf-button -sidebar-tree">sidebar-tree Default Button</button>
<button class="sf-button -sidebar-tree" disabled>Disabled sidebar-tree Default Button</button>
4.27 #Button.sidebar-tree-invert sidebar-tree-invert Button
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button.-sidebar-tree-invert
Html
<button class="sf-button -sidebar-tree-invert">sidebar-tree-invert Default Button</button>
<button class="sf-button -sidebar-tree-invert" disabled>Disabled sidebar-tree-invert Default Button</button>
4.28 #Button.sidebar-tree-invert-large sidebar-tree-invert large Button
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button.-large.-sidebar-tree-invert
Html
<button class="sf-button -sidebar-tree-invert -large">sidebar-tree-invert large Default Button</button>
<button class="sf-button -sidebar-tree-invert -large" disabled>Disabled sidebar-tree-invert large Default Button</button>
4.29 #Button.sidebar-tree-invert-small sidebar-tree-invert small Button
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button.-small.-sidebar-tree-invert
Html
<button class="sf-button -sidebar-tree-invert -small">sidebar-tree-invert small Default Button</button>
<button class="sf-button -sidebar-tree-invert -small" disabled>Disabled sidebar-tree-invert small Default Button</button>
4.30 #Button.sidebar-tree-large sidebar-tree large Button
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button.-large.-sidebar-tree
Html
<button class="sf-button -sidebar-tree -large">sidebar-tree large Default Button</button>
<button class="sf-button -sidebar-tree -large" disabled>Disabled sidebar-tree large Default Button</button>
4.31 #Button.sidebar-tree-small sidebar-tree small Button
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button.-small.-sidebar-tree
Html
<button class="sf-button -sidebar-tree -small">sidebar-tree small Default Button</button>
<button class="sf-button -sidebar-tree -small" disabled>Disabled sidebar-tree small Default Button</button>
4.32 #Button.small small Button
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button.-small
Html
<button class="sf-button -small">small Default Button</button>
<button class="sf-button -small" disabled>Disabled small Default Button</button>
4.33 #Button.toggle Toggle buttons
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
.sf-button.-toggle
Html
<button class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-sitemap sf-button__icon"></i></button>
<button class="sf-button -active -icon -toggle"><i class="sf-icon sf-fa sf-fa-filter sf-button__icon"></i></button>
<button class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-cog sf-button__icon"></i></button>
<button class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-lightbulb-o sf-button__icon"></i></button>
<button class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-th-list sf-button__icon"></i></button>
<button class="sf-button -toggle"><span class="sf-button__content"><i class="sf-badge -size-xl-fixed -add-variation -sf-txt-small">EN</i></span></button>
<br>
<a class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-sitemap sf-button__icon"></i></a>
<a class="sf-button -active -icon -toggle"><i class="sf-icon sf-fa sf-fa-filter sf-button__icon"></i></a>
<a class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-cog sf-button__icon"></i></a>
<a class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-lightbulb-o sf-button__icon"></i></a>
<a class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-th-list sf-button__icon"></i></a>
<a class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-angle-left -size-2xl sf-button__icon"></i></a>
<a class="sf-button -icon -toggle -disabled"><i class="sf-icon sf-fa sf-fa-angle-left -size-2xl sf-button__icon"></i></a>