Buttons

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

Button Sizes

Properties such as small and large can be added to your button in order to change its size.

<Row className="ExampleButtons">
  <Col>
    <h3>Button Sizes</h3>  
    <p>Properties such as <code>small</code> and <code>large</code> can be added to your button in order to change its size.</p>
  </Col>
  <Col>
    <Button small>Small</Button>
    <Button>Default</Button>
    <Button large>Large</Button>
  </Col>
</Row>

<Row className="ExampleButtons">
  <Col>
    <h3>Button Sizes</h3>  
    <p>Properties such as <code>small</code> and <code>large</code> can be added to your button in order to change its size.</p>
  </Col>
  <Col>
    <Button small>Small</Button>
    <Button>Default</Button>
    <Button large>Large</Button>
  </Col>
</Row>

Button Types

<Row className="ExampleButtons">
  <Col>
    <h3>Button Types</h3>  
  </Col>
  <Col>
    <Button>Default</Button>
    <Button primary>Primary</Button>
    <Button secondary>Secondary</Button>
  </Col>
  <Col>
    <div className="ExampleBkgd--primary">
      <Button inverted>Inverted</Button>
      <Button inverted primary>Inverted Primary</Button>
      <Button inverted secondary>Inverted Secondary</Button>
    </div>
  </Col>
  <Col>
    <Button success>Success</Button>
    <Button warning>Warning</Button>
    <Button alert>Alert</Button>
    <Button disabled>Disabled</Button>
    <Button disabled secondary>Disabled Secondary</Button>
  </Col>
</Row>

<Row className="ExampleButtons">
  <Col>
    <h3>Button Types</h3>  
  </Col>
  <Col>
    <Button>Default</Button>
    <Button primary>Primary</Button>
    <Button secondary>Secondary</Button>
  </Col>
  <Col>
    <div className="ExampleBkgd--primary">
      <Button inverted>Inverted</Button>
      <Button inverted primary>Inverted Primary</Button>
      <Button inverted secondary>Inverted Secondary</Button>
    </div>
  </Col>
  <Col>
    <Button success>Success</Button>
    <Button warning>Warning</Button>
    <Button alert>Alert</Button>
    <Button disabled>Disabled</Button>
    <Button disabled secondary>Disabled Secondary</Button>
  </Col>
</Row>

Expanded Buttons

<div>
  <Col>
    <h3>Expanded Buttons</h3>
  </Col>
  <Col>
    <Button expanded small>expanded small</Button>
    <Button expanded>expanded</Button>
    <Button expanded large>expanded large</Button>
  </Col>
</div>

<div>
  <Col>
    <h3>Expanded Buttons</h3>
  </Col>
  <Col>
    <Button expanded small>expanded small</Button>
    <Button expanded>expanded</Button>
    <Button expanded large>expanded large</Button>
  </Col>
</div>

Form Attributes

<div>
  <Col>
    <h3>Form Attributes</h3>
  </Col>
  <Col>
    <Button secondary type="submit" name="action" value="cancel">
      Cancel
    </Button>
  </Col>
</div>

<div>
  <Col>
    <h3>Form Attributes</h3>
  </Col>
  <Col>
    <Button secondary type="submit" name="action" value="cancel">
      Cancel
    </Button>
  </Col>
</div>

Link Button

The Link Button component is created for all those times you need a link to be styled like a button. This component will render out as an <a /> tag.

Google

<div>
  <Col>
    <h3>Link Button</h3>
    <p>The Link Button component is created for all those times you need a link to be styled like a button. This 
    component will render out as an <code>{"<a />"}</code> tag.</p>
  </Col>
  <Col>
    <Button href="https://google.com" target="_blank">
      Google
    </Button>
  </Col>
</div>

<div>
  <Col>
    <h3>Link Button</h3>
    <p>The Link Button component is created for all those times you need a link to be styled like a button. This 
    component will render out as an <code>{"<a />"}</code> tag.</p>
  </Col>
  <Col>
    <Button href="https://google.com" target="_blank">
      Google
    </Button>
  </Col>
</div>

Button Group

<div>
  <Col>
    <h3>Button Group</h3>
  </Col>
  <Col>
    <ButtonGroup>
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Three</Button>
    </ButtonGroup>
  </Col>
</div>

<div>
  <Col>
    <h3>Button Group</h3>
  </Col>
  <Col>
    <ButtonGroup>
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Three</Button>
    </ButtonGroup>
  </Col>
</div>

Variables:

Variable Name	Default Value	Description
Button Vars
Var: `$button-bkgd`	Default Value: `$color-brand-primary`	Description: Default background color for buttons.
Var: `$button-border`	Default Value: `0`	Description: Default border for buttons.
Var: `$button-color`	Default Value: `$color-white`	Description: Default font color for buttons.
Var: `$button-bkgd-hover`	Default Value: `darken($color-brand-primary, 5%)`	Description: Default background color for buttons on hover.
Var: `$button-color-hover`	Default Value: `$color-white`	Description: Default font color for buttons on hover.
Var: `$button-bkgd-active`	Default Value: `$darken($color-brand-primary, 10%)`	Description: Default background color for buttons that are active.
Var: `$button-color-active`	Default Value: `$color-white`	Description: Default font color for buttons that are active.
Var: `$button-radius`	Default Value: `$border-radius-small`	Description: Default border-radius for buttons.
Var: `$button-bkgd-secondary`	Default Value: `transparent`	Description: Default background color for secondary buttons.
Var: `button-box-shadow-secondary`	Default Value: `$color-brand-primary`	Description: Default box-shadow for secondary buttons.
Var: `$button-color-secondary`	Default Value: `$color-brand-primary`	Description: Default font color for secondary buttons.
Var: `$button-bkgd-secondary-hover`	Default Value: `darken($color-brand-primary, 5%)`	Description: Default background color for secondary buttons on hover.
Var: `$button-box-shadow-secondary-hover`	Default Value: `darken($color-brand-primary, 5%)`	Description: Default box-shadow for secondary buttons on hover.
Var: `$button-color-secondary-hover`	Default Value: `$color-white`	Description: Default font color for secondary buttons on hover.
Var: `$button-bkgd-secondary-active`	Default Value: `darken($color-brand-primary, 10%)`	Description: Default background color for secondary buttons that are active.
Var: `$button-box-shadow-secondary-active`	Default Value: `darken($color-brand-primary, 10%)`	Description: Default box-shadow for secondary buttons that are active.
Var: `$button-color-secondary-active`	Default Value: `$color-white`	Description: Default color for secondary buttons that are active.

Properties:

Name	Type	Default	Description
Button Props
Prop: `small`	Type: bool	Default: false	Description: Prop added for small buttons. Adds the class `rev-Button--small`
Name: `large`	Type: bool	Default: false	Description: Prop added for large buttons. Adds the class `rev-Button--large`
Name: `primary`	Type: bool	Default: false	Description: Prop added for primary button styles. Adds the class `rev-Button--primary`
Name: `secondary`	Type: bool	Default: false	Description: Prop added for secondary (hollow) button styles. Adds the class `rev-Button--secondary`
Name: `inverted`	Type: bool	Default: false	Description: Prop added to invert a buttons background and font color. Adds the class `rev-Button--inverted`
Name: `success`	Type: bool	Default: false	Description: Prop added for success button styles. Adds the class `rev-Button--success`
Name: `warning`	Type: bool	Default: false	Description: Prop added for warning button styles. Adds the class `rev-Button--warning`
Name: `alert`	Type: bool	Default: false	Description: Prop added for alert button styles. Adds the class `rev-Button--alert`
Name: `disabled`	Type: bool	Default: false	Description: Prop added for disabled button styles. Adds the class `rev-Button--disabled`
Name: `expanded`	Type: bool	Default: false	Description: Prop added to expand the button width to 100%. Adds the class `rev-Button--expanded`
Name: `href`	Type: string	Default:	Description: Prop added to a link to make it styled like a button. Adds the class `rev-Button`
Name: `target`	Type: enum: `_blank`, `_parent`, `_self`, `_top`	Default:	Description: Attribute added to specify how you want the link to open.
Name: `type`	Type: enum: `submit`, `reset`, `button`	Default:	Description: Attribute added to specify the type of button.
Name: `name`	Type: string	Default:	Description: Attribute added that names the button. This will be submitted with the form data.
Name: `value`	Type: string	Default:	Description: Attribute added to define the value of the button. This will be submitted with the form data.

ButtonGroup Properties:

Name	Type	Default	Description
ButtonGroup Props
Prop: `small`	Type: bool	Default: false	Description: Prop added for small buttons. Adds the class `rev-ButtonGroup--small`
Name: `large`	Type: bool	Default: false	Description: Prop added for large buttons. Adds the class `rev-ButtonGroup--large`
Name: `primary`	Type: bool	Default: false	Description: Prop added for primary button styles. Adds the class `rev-ButtonGroup--primary`
Name: `secondary`	Type: bool	Default: false	Description: Prop added for secondary (hollow) button styles. Adds the class `rev-ButtonGroup--secondary`
Name: `inverted`	Type: bool	Default: false	Description: Prop added to invert a buttons background and font color. Adds the class `rev-ButtonGroup--inverted`
Name: `success`	Type: bool	Default: false	Description: Prop added for success button styles. Adds the class `rev-ButtonGroup--success`
Name: `warning`	Type: bool	Default: false	Description: Prop added for warning button styles. Adds the class `rev-ButtonGroup--warning`
Name: `alert`	Type: bool	Default: false	Description: Prop added for alert button styles. Adds the class `rev-ButtonGroup--alert`
Name: `disabled`	Type: bool	Default: false	Description: Prop added for disabled button styles. Adds the class `rev-ButtonGroup--disabled`
Name: `expanded`	Type: bool	Default: false	Description: Prop added to expand the button width to 100%. Adds the class `rev-ButtonGroup--expanded`
Name: `stackedForSmall`	Type: string	Default:	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`