ButtonIn groundhog since v0.1.1
The Groundhog button is a visual block representing an action or link on the page. The button usually holds either text or an icon representing an action. The button can be used to make a link on a webpage more noticeable, or draw attention to an action on the page.
The Groundhog button appears in a two versions, each available on light and dark backgrounds:
- Primary button
- Secondary button
Including a button
- To include a Groundhog button add either an
<a>(anchor/link) or an
<button>element. Include the necessary text or icon content.
<a href="#">This is a button</a>
- Add the necessary Groundhog classes to the elements class attribute.
<a href="#" class="btn btn--primary">This is a button</a>
- The button is ready to use
When using a
button element, make sure that you at least include the
type="button" attributes to the element.
Using Icons with Buttons
To use buttons and icons together, you need the icon module as well as the icon component. Groundhog uses svg reference functionality to reduce load duplication of icon content. You can find the code to use an icon within a button here.
Available classes for button
||Base class for the button element|
||Sets the button as a primary button|
||Sets the button as a secondary button|
||Sets the button to an icon only state|
||Sets the theme of the button to dark|
Available mixins for button
||Base styles for all button variants|
||Primary button styles|
||Secondary button styles|
||Icon only button styles|
||Applies styles on icon elements in buttons|
||Priary button on dark bg styles|
||Secondary button on dark bg styles|