Buttons

Harmonium provides semantic button components for a variety of uses, in differing styles and sizes.

expand
expand
expand
expand
expand
expand

Variables:

Variable NameDefault ValueDescription
Button Vars
Var: $button-bkgdDefault Value: $brandDescription: Default background color for buttons.
Var: $button-borderDefault Value: 0Description: Default border for buttons.
Var: $button-colorDefault Value: $whiteDescription: Default font color for buttons.
Var: $button-bkgd-hoverDefault Value: darken($brand, 5%)Description: Default background color for buttons on hover.
Var: $button-color-hoverDefault Value: $whiteDescription: Default font color for buttons on hover.
Var: $button-bkgd-activeDefault Value: $darken($brand, 10%)Description: Default background color for buttons that are active.
Var: $button-color-activeDefault Value: $whiteDescription: Default font color for buttons that are active.
Var: $button-radiusDefault Value: $global-radiusDescription: Default border-radius for buttons.
Var: $button-bkgd-secondaryDefault Value: transparentDescription: Default background color for secondary buttons.
Var: button-box-shadow-secondaryDefault Value: $brandDescription: Default box-shadow for secondary buttons.
Var: $button-color-secondaryDefault Value: $brandDescription: Default font color for secondary buttons.
Var: $button-bkgd-secondary-hoverDefault Value: darken($brand, 5%)Description: Default background color for secondary buttons on hover.
Var: $button-box-shadow-secondary-hoverDefault Value: darken($brand, 5%)Description: Default box-shadow for secondary buttons on hover.
Var: $button-color-secondary-hoverDefault Value: $whiteDescription: Default font color for secondary buttons on hover.
Var: $button-bkgd-secondary-activeDefault Value: darken($brand, 10%)Description: Default background color for secondary buttons that are active.
Var: $button-box-shadow-secondary-activeDefault Value: darken($brand, 10%)Description: Default box-shadow for secondary buttons that are active.
Var: $button-color-secondary-activeDefault Value: $whiteDescription: Default color for secondary buttons that are active.

Properties:

NameTypeDefaultDescription
Button Props
Prop: smallType: boolDefault: falseDescription: Prop added for small buttons. Adds the class rev-Button--small
Name: largeType: boolDefault: falseDescription: Prop added for large buttons. Adds the class rev-Button--large
Name: primaryType: boolDefault: falseDescription: Prop added for primary button styles. Adds the class rev-Button--primary
Name: secondaryType: boolDefault: falseDescription: Prop added for secondary (hollow) button styles. Adds the class rev-Button--secondary
Name: invertedType: boolDefault: falseDescription: Prop added to invert a buttons background and font color. Adds the class rev-Button--inverted
Name: successType: boolDefault: falseDescription: Prop added for success button styles. Adds the class rev-Button--success
Name: warningType: boolDefault: falseDescription: Prop added for warning button styles. Adds the class rev-Button--warning
Name: alertType: boolDefault: falseDescription: Prop added for alert button styles. Adds the class rev-Button--alert
Name: disabledType: boolDefault: falseDescription: Prop added for disabled button styles. Adds the class rev-Button--disabled
Name: expandedType: boolDefault: falseDescription: Prop added to expand the button width to 100%. Adds the class rev-Button--expanded
Name: hrefType: stringDefault:Description: Prop added to a link to make it styled like a button. Adds the class rev-Button
Name: targetType: enum: _blank, _parent, _self, _topDefault:Description: Attribute added to specify how you want the link to open.
Name: typeType: enum: submit, reset, buttonDefault:Description: Attribute added to specify the type of button.
Name: nameType: stringDefault:Description: Attribute added that names the button. This will be submitted with the form data.
Name: valueType: stringDefault:Description: Attribute added to define the value of the button. This will be submitted with the form data.

ButtonGroup Properties:

NameTypeDefaultDescription
ButtonGroup Props
Prop: smallType: boolDefault: falseDescription: Prop added for small buttons. Adds the class rev-ButtonGroup--small
Name: largeType: boolDefault: falseDescription: Prop added for large buttons. Adds the class rev-ButtonGroup--large
Name: primaryType: boolDefault: falseDescription: Prop added for primary button styles. Adds the class rev-ButtonGroup--primary
Name: secondaryType: boolDefault: falseDescription: Prop added for secondary (hollow) button styles. Adds the class rev-ButtonGroup--secondary
Name: invertedType: boolDefault: falseDescription: Prop added to invert a buttons background and font color. Adds the class rev-ButtonGroup--inverted
Name: successType: boolDefault: falseDescription: Prop added for success button styles. Adds the class rev-ButtonGroup--success
Name: warningType: boolDefault: falseDescription: Prop added for warning button styles. Adds the class rev-ButtonGroup--warning
Name: alertType: boolDefault: falseDescription: Prop added for alert button styles. Adds the class rev-ButtonGroup--alert
Name: disabledType: boolDefault: falseDescription: Prop added for disabled button styles. Adds the class rev-ButtonGroup--disabled
Name: expandedType: boolDefault: falseDescription: Prop added to expand the button width to 100%. Adds the class rev-ButtonGroup--expanded
Name: stackedForSmallType: stringDefault:Description: Prop added to button links that you want to stack on small screens. This helps avoid button groups breaking to a new line on smaller screens. Adds the class rev-ButtonGroup--stackedForSmall