Buttons

Kelp provides a variety of options for using and styling buttons.

Default Buttons

The <button> element is styled out-of-the-box.

<button>Hi There!</button>

Sizes

Use the .size-* utility classes to adjust the size of a button. Because Kelp uses em units for sizing, the padding scale proportionally up or down.

<button>Default Button</button>
<button class="size-xl">Large Button</button>
<button class="size-xs">Small Button</button>

Colors

You can adjust the color of a button using the .primary, .secondary, .success, .danger, and .warning classes.

<button>Neutral</button>
<button class="primary">Primary</button>
<button class="secondary">Secondary</button>
<button class="success">Success</button>
<button class="danger">Danger</button>
<button class="warning">Warning</button>

Muted Buttons

Use the .muted class to create a more subtle button. It can be paired with the color classes.

<button class="muted">Neutral</button>
<button class="muted primary">Primary</button>
<button class="muted secondary">Secondary</button>
<button class="muted success">Success</button>
<button class="muted danger">Danger</button>
<button class="muted warning">Warning</button>

Outline Buttons

Use the .outline class to style a button with a transparent background. It can be paired with the color classes.

<button class="outline">Neutral</button>
<button class="outline primary">Primary</button>
<button class="outline secondary">Secondary</button>
<button class="outline success">Success</button>
<button class="outline danger">Danger</button>
<button class="outline warning">Warning</button>

Plain Buttons

Use the .plain class to style a button with a transparent border and background. This is particularly useful for buttons with icons.

It can be paired with the color classes.

<button class="plain">Neutral</button>
<button class="plain primary">Primary</button>
<button class="plain secondary">Secondary</button>
<button class="plain success">Success</button>
<button class="plain danger">Danger</button>
<button class="plain warning">Warning</button>

Block Buttons

Use the .block utility class to create a button that fills the width of its parent container.

<button class="block">Block Button</button>

Links as Buttons

You can style a link to look like a button with the .btn class. It can be paired with the color, .muted, and .outline classes.

This is a Link

<a class="btn" href="#">This is a Link</a>

Buttons as Links

You can style a button to look like a link with the .link class. You can also add the .link-subtle class.

<button class="link">This is a button</button>
<button class="link link-subtle">So is this</button>

Buttons styled as links retain button padding, which is useful when including them with regularly styled buttons.

<button>Join Now</button>
<button class="link">Or learn more...</button>

Documentation