The map $btn-palette allows generating any number of button variants. If a key starts with ., # or %, Clay will output it as is, otherwise we will prepend .btn- to the key (e.g., .btn-primary). It will also generate Sass placeholders prefix/appended by %btn- and %btn-{color}-focus (e.g., %btn-primary and %btn-primary-focus), respectively.
Create block level buttons—those that span the full width of a parent—by adding .btn-block.
Snippet
<buttonclassName="btn btn-block btn-secondary btn-xs"type="button">
Extra Small Block Level Button
</button>
<buttonclassName="btn btn-block btn-secondary btn-sm"type="button">
Small Block Level Button
</button>
<buttonclassName="btn btn-block btn-secondary"type="button">
Normal Block Level Button
</button>
Button Size Sass API
The map $btn-sizes allows generating any number of button size variants. If a key starts with btn- Clay will prepend . to the key (e.g., .btn-sm). It will also generate a Sass placeholder prefixed by %clay- (e.g., %clay-btn-sm).
Buttons will appear pressed when active. However, you can still force the same active appearance with .active (and include the aria-pressed="true" attribute) should you need to replicate the state programmatically.
Button groups are used to switch between complementary views for example, but they must never be used for complementary actions, “Change and Cancel” actions, or “Save and Cancel” actions. In those cases, single buttons are the correct solution.
Buttons can display icons instead of text. The icons, however, must be monospaced inside the button. Lexicon doesn’t use buttons with text and icons or text and loading indicators. Icon buttons are used primarily in management bars. This button variation can be primary, secondary, or borderless type.
The map $btn-monospaced-sizes allows generating any number of button monospaced size variants. If a key starts with btn-monospaced- Clay will replace it with .btn-monospaced.btn (e.g., .btn-monospaced.btn-sm). It will also generate a Sass placeholder prefixed by %clay- (e.g., %clay-btn-monospaced-sm).
This button type is only used in sites, outside of administration. The icon emphasizes and helps communicate the action. The label must match the icon’s purpose.
Wrap the icon with the <span /> tag and adding the Inline Item utilities, try adding the .inline-item.inline-item-(before|after) modifier class.