Skip to main contentSkip to search

Buttons

Buttons communicate an action to happen on user interaction.

installyarn add @clayui/button
version3.116.0

Stable3.116.0View in LexiconCHANGELOGstorybook demos

Don't forget to check WAI-ARIA accessibility pratices for buttons when writting your markup.

Examples

Code Sample (expand to see it) 
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-secondary" type="button">Secondary</button>
<button class="btn btn-info" type="button">Info</button>
<button class="btn btn-success" type="button">Success</button>
<button class="btn btn-warning" type="button">Warning</button>
<button class="btn btn-danger" type="button">Danger</button>
<button class="btn btn-link" type="button">Link</button>

Button Variant Sass API

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.

Code Sample (expand to see it) 
$btn-palette: (
    primary: (
        background-color: $primary,
    ),
    '%btn-tertiary': (
        background-color: green,
    ),
    '.btn-tertiary': (
        extend: '%btn-tertiary',
    ),
    '.btn-quaternary': (
        extend: '%btn-tertiary',
    ),
);

Outputs:

Code Sample (expand to see it) 
.btn-primary {
    background-color: #0b5fff;
}

.btn-tertiary, .btn-quaternary {
    background-color: green;
}

Sizes

Code Sample (expand to see it) 
<button class="btn btn-primary" type="button">Default</button>
<button class="btn btn-primary btn-sm" type="button">Small</button>
<button class="btn btn-primary btn-xs" type="button">Extra Small</button>

Create block level buttons—those that span the full width of a parent—by adding .btn-block.

Code Sample (expand to see it) 
<button class="btn btn-block btn-secondary btn-xs" type="button">
	Extra Small Block Level Button
</button>
<button class="btn btn-block btn-secondary btn-sm" type="button">
	Small Block Level Button
</button>
<button class="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).

Code Sample (expand to see it) 
$btn-sizes: (
    btn-sm: (
        font-size: 14px,
    ),
    '.btn-xs': (
        extend: '%clay-btn-sm',
    ),
    '%btn-xxs': (
        font-size: 12px,
    ),
    '.btn-xxs': (
        extend: '%btn-xxs',
    ),
);

Outputs:

Code Sample (expand to see it) 
.btn-sm, .btn-xs {
    font-size: 14px;
}

.btn-xxs {
    font-size: 12px;
}

Active State

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.

Code Sample (expand to see it) 
<button class="active btn btn-primary" type="button">Primary</button>
<button class="active btn btn-secondary" type="button">Secondary</button>

Disabled State

Make buttons look inactive by adding the disabled boolean attribute to any <button> element.

Code Sample (expand to see it) 
<button class="btn btn-primary" disabled="" type="button">Primary</button>
<button class="btn btn-secondary" disabled="" type="button">Secondary</button>

Group

Split Button

Split buttons are used when you need to offer the user a quick main action along with secondary actions.

Action
Scope
Action
Scope
Code Sample (expand to see it) 
<div class="btn-group dropdown" role="group">
	<button class="btn btn-primary" type="button">Primary</button>
	<button
		aria-expanded="false"
		aria-haspopup="true"
		class="btn btn-primary btn-monospaced dropdown-toggle"
		data-toggle="dropdown"
		type="button"
	>
		<svg
			class="lexicon-icon lexicon-icon-caret-bottom"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#caret-bottom" />
		</svg>
	</button>
</div>

Button group

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.

Code Sample (expand to see it) 
<div class="btn-group" role="group">
	<button class="btn btn-secondary" type="button">Day</button>
	<button class="active btn btn-secondary" type="button">Month</button>
	<button class="btn" type="button">Year</button>
</div>

Icons

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.

Try adding the modifier class .btn-monospaced.

Code Sample (expand to see it) 
<button
	aria-label="Blogs"
	title="Blogs"
	class="btn btn-monospaced btn-primary btn-xs"
	type="button"
>
	<svg
		class="lexicon-icon lexicon-icon-blogs"
		focusable="false"
		role="presentation"
	>
		<use href="/images/icons/icons.svg#blogs"></use>
	</svg>
</button>

<button
	aria-label="Blogs"
	title="Blogs"
	class="btn btn-monospaced btn-secondary btn-xs"
	type="button"
>
	<svg
		class="lexicon-icon lexicon-icon-blogs"
		focusable="false"
		role="presentation"
	>
		<use href="/images/icons/icons.svg#blogs"></use>
	</svg>
</button>

<button
	aria-label="Blogs"
	title="Blogs"
	class="btn btn-monospaced btn-primary btn-sm"
	type="button"
>
	<svg
		class="lexicon-icon lexicon-icon-blogs"
		focusable="false"
		role="presentation"
	>
		<use href="/images/icons/icons.svg#blogs"></use>
	</svg>
</button>

<button
	aria-label="Blogs"
	title="Blogs"
	class="btn btn-monospaced btn-secondary btn-sm"
	type="button"
>
	<svg
		class="lexicon-icon lexicon-icon-blogs"
		focusable="false"
		role="presentation"
	>
		<use href="/images/icons/icons.svg#blogs"></use>
	</svg>
</button>

<button
	aria-label="Blogs"
	title="Blogs"
	class="btn btn-monospaced btn-primary"
	type="button"
>
	<svg
		class="lexicon-icon lexicon-icon-blogs"
		focusable="false"
		role="presentation"
	>
		<use href="/images/icons/icons.svg#blogs"></use>
	</svg>
</button>

<button
	aria-label="Blogs"
	title="Blogs"
	class="btn btn-monospaced btn-secondary"
	type="button"
>
	<svg
		class="lexicon-icon lexicon-icon-blogs"
		focusable="false"
		role="presentation"
	>
		<use href="/images/icons/icons.svg#blogs"></use>
	</svg>
</button>

Button Monospaced Sass API

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).

Code Sample (expand to see it) 
$btn-monospaced-sizes: (
    btn-monospaced-sm: (
        font-size: 14px,
    ),
    '.btn-monospaced.btn-xs': (
        extend: '%clay-btn-monospaced-sm',
    ),
    '%btn-monospaced-xxs': (
        font-size: 12px,
    ),
    '.btn-monospaced.btn-xxs': (
        extend: '%btn-monospaced-xxs',
    ),
);

Outputs:

Code Sample (expand to see it) 
.btn-monospaced.btn-sm, .btn-monospaced.btn-xs {
    font-size: 14px;
}

.btn-monospaced.btn-xxs {
    font-size: 12px;
}

With Text Button

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.

Code Sample (expand to see it) 
<button class="btn btn-secondary" type="button">
	<span class="inline-item inline-item-before">
		<svg
			class="lexicon-icon lexicon-icon-blogs"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#share"></use>
		</svg>
	</span>
	Share
</button>

<button class="btn btn-secondary btn-sm" type="button">
	<span class="inline-item inline-item-before">
		<svg
			class="lexicon-icon lexicon-icon-blogs"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#share"></use>
		</svg>
	</span>
	Share
</button>

<button class="btn btn-secondary btn-xs" type="button">
	<span class="inline-item inline-item-before">
		<svg
			class="lexicon-icon lexicon-icon-blogs"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#share"></use>
		</svg>
	</span>
	Share
</button>

Shapes

Rounded

The class rounded-pill will make the button pill shaped.

Code Sample (expand to see it) 
<button class="btn btn-secondary rounded-pill" type="button">
	<span class="inline-item inline-item-before">
		<svg
			class="lexicon-icon lexicon-icon-blogs"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#share"></use>
		</svg>
	</span>
	Share
</button>
<button class="btn btn-secondary btn-sm rounded-pill" type="button">
	<span class="inline-item inline-item-before">
		<svg
			class="lexicon-icon lexicon-icon-blogs"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#share"></use>
		</svg>
	</span>
	Share
</button>
<button class="btn btn-secondary btn-xs rounded-pill" type="button">
	<span class="inline-item inline-item-before">
		<svg
			class="lexicon-icon lexicon-icon-blogs"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#share"></use>
		</svg>
	</span>
	Share
</button>

How can this be improved? Create an issue!