This component can use icons. For more information, check out the icons documentation.
The base .joy-button class serves as the default button. It inherits the $color-base color of the palette. All button variations are built by adding classes to .joy-button.
<button class="joy-button">Default</button>
<button class="joy-button joy-button--success">Success</button>
<button class="joy-button joy-button--danger">Danger</button>
<button class="joy-button" disabled>Disabled Button</button>Disable <button> elements with the disabled attribute. Since disabled is not a valid attribute for anchor tags, you can use the class joy-button--disabled to disable, and <a> elements.
Outline buttons have transparent background. These should be used for secondary actions.
<button class="joy-button joy-button--outline">Default</button>
<button class="joy-button joy-button--outline joy-button--success">Success</button>
<button class="joy-button joy-button--outline joy-button--danger">Danger</button>
<button class="joy-button joy-button--outline" disabled>Disabled Button</button>Outline buttons have transparent background. These should be used for secondary actions.
<button class="joy-button joy-button--flat">Default</button>
<button class="joy-button joy-button--flat joy-button--success">Success</button>
<button class="joy-button joy-button--flat joy-button--danger">Danger</button>
<button class="joy-button joy-button--flat" disabled>Disabled Button</button>The three basic button types, Solid, Outline, and Flat, should be used to denote primary, secondary, and tertiary actions respectively.
<button class="joy-button">Primary</button>
<button class="joy-button joy-button--outline">Secondary</button>
<button class="joy-button joy-button--flat">Tertiary</button>Inverse buttons are intended to use on non-light backgrounds. They are similar to outline buttons, they have transparent backgrounds but use white borders and text so they can be read more easily solid color or dark backgrounds.
<button class="joy-button joy-button--inverse">Inverse Button</button>
<button class="joy-button joy-button--inverse" disabled="">Disabled Inverse Button</button>Buttons come in two sizes:
Small buttons should be used in content areas where smaller buttons are needed to de-emphasize calls to action.
Large and Huge buttons have been deprecated
Please only use small and normal button sizes. You will need to write custom styles if you need larger buttons.Large and Huge buttons will be fully removed in 1.0.0
<button class="joy-button joy-button--small">Small Button</button>
<button class="joy-button">Normal Button</button>Block buttons simply force a button to grow to the full width of its parent container.
<button class="joy-button joy-button--block">Block</button>Same as the base button, except it uses the $color-alt color from the color palette. Can be used in conjunction with any other button modifier classes.
<button class="joy-button joy-button--alt">Alt Button</button>
<a class="joy-button joy-button--alt" href="#">Anchor Alt Button</a>
<button class="joy-button joy-button--alt" disabled="">Disabled Alt Button</button>Link buttons have been deprecated
Use Flat Buttons or default link styles instead.Link buttons will be fully removed in 1.0.0
Use the .joy-button--link to create buttons that just look like links. These should be used when putting a link and a button side-by-side.
<button class="joy-button joy-button--link">Link Button</button>
<a class="joy-button joy-button--link" href="#">Anchor Link Button</a>
<button class="joy-button joy-button--link" disabled="">Disabled Link Button</button>
<br><br>
<button class="joy-button joy-button--link">Cancel</button>
<button class="joy-button">Submit</button>A button's content will wrap if the button is wider than the width of its parent container.
However, you can use the class .joy-button--no-wrap to prevent a button's text from wrapping. Be careful when using this within containers with overflow: hidden as it could result in some of the button being hidden.
<div style="width: 200px; background-color: #ddd; padding: 1rem 0;">
<button class="joy-button"><i class="fa fa-camera"></i> Button with Icon with wrap</button>
<br><br>
<button class="joy-button joy-button--small"><i class="fa fa-camera"></i> Small Button with Icon with wrap</button>
<br><br>
<button class="joy-button joy-button--no-wrap"><i class="fa fa-camera"></i> Button with Icon no-wrap</button>
</div>If you need a custom button, you can use the button-color Sass mixin for creating a button in a color that is not available by default.
The source for the mixin looks like this:
@mixin button-color(
$mx-bkgd : $color-btn-bkgd, // Button background
$mx-brdr : $mx-bkgd, // Button border
$mx-text : $white, // Button text
$mx-bkgd-hover : $color-btn-bkgd-hover, // Hover background
$mx-brdr-hover : $mx-bkgd-hover, // Hover border
$mx-text-hover : $mx-text, // Hover text
$mx-bkgd-active : darken($mx-bkgd, 3), // Active background
$mx-bkgd-disabled: $color-btn-bkgd-disabled, // Disabled background
$mx-brdr-disabled: $color-btn-brdr-disabled, // Disabled border
$mx-text-disabled: $color-btn-text-disabled, // Disabled text
$mx-shdw-focus : $shadow-button-focus, // Focus shadow - ex: "0 0 3px $color-base"
$mx-bkgd-focus : $mx-bkgd, // Focus background
$mx-brdr-focus : $mx-brdr, // Focus border
$mx-text-focus : $mx-text // Focus text
) {
background-color: $mx-bkgd;
border-color: $mx-brdr;
color: $mx-text;
&:active {
color: $mx-text;
background-color: $mx-bkgd-active;
}
&:focus,
&:active {
color: $mx-text-focus;
background-color: $mx-bkgd-focus;
border-color: $mx-brdr-focus;
box-shadow: $mx-shdw-focus;
}
&:hover {
background-color: $mx-bkgd-hover;
border-color: $mx-brdr-hover;
color: $mx-text-hover;
}
&[disabled],
&.joy-button--disabled,
&.joy-button--disabled:hover,
&.joy-button--disabled:focus {
background: $mx-bkgd-disabled;
border-color: $mx-brdr-disabled;
color: $mx-text-disabled;
}
}To use it, simply create a class in your project's Sass files (assuming you have imported Joystick).
.custom-button {
@include button-color(
$berry, // Button background
$berry, // Button border
$white, // Button text
$berry-dark, // Hover background
$berry-dark, // Hover border
$color-btn-text-alt-hover, // Hover text
$berry-dark, // Active background
$color-btn-bkgd-disabled, // Disabled background
$color-btn-brdr-disabled, // Disabled border
$color-btn-text-disabled, // Disabled text
$shadow-button-focus-alt // Focus shadow
);
}And then just apply your custom class to the base .joy-button class.
<button class="joy-button custom-button">Custom button</button>