Buttons[ Variable Reference ]

Button elements, anchor elements with a .button class, and input buttons will all render exactly the same.

NOTE: To reduce code bloat, button modifiers only apply to elements with a .button class so be sure to add this class to any button or input elements which you wish to modify.

Button Link

Colors

Use the modifiers .primary, .secondary, .success, .warning or .error to change the button color.

Primary Secondary Success Warning Error

Outline buttons

Add the modifier .outline to show buttons without a background fill.

Primary Secondary Success Warning Error

Ghost buttons

Add the modifier .ghost to make buttons appear as links, whilst retaining the height and properties of a button. This can be used to display ghost buttons on the same row as buttons with background color.

Primary Secondary Success Warning Error

Disabled buttons

To disable a button set the disabled property on a <button> element. It is not possible to disable links without additional javascript, so Jellyfish does not allow you to simulate a disabled state on anchor elements.

Primary Secondary Success Warning Error

Button sizes

Add the modifier .xsmall, .small or .large to change the size of a button.

X Small Small Regular Large

Expanded buttons

Add the modifier .expanded to make the button 100% width.

Expanded Button Expanded Button

Combining modifiers

Modifiers can be combined.

XSmall Regular Secondary Outline Warning Outline Large Large Ghost Expanded Secondary Expanded Error Outline Large

Button Lists and groups

Button List

Wrap buttons in an element with class .button-list to group them into a list. Buttons in a button list have consistent spacing and will wrap over multiple lines.

Button Group

Wrap two or more buttons in a .button-group class to group them together. Buttons in a group will have their inner margins collapsed along with any border-radius.

Combine Button Lists and Groups

Create-your-own

Buttons make use of custom CSS properties to change the background/border color and text color - both in active and passive states. This allows the output CSS to be highly performant and DRY.

It's easy to create buttons with additional color schemes; simply add a new color to the $colors SCSS map. Jellyfish will automatically create the CSS properties for your theme color, as well as the button modifiers. Jellyfish will also ensure the button text is white, $color-text or black depending on which has the best contrast against the base color, for optimal accessibility.