Button

Buttons controls interface actions. The button text should describe what happens when the user interacts with it.

  • Types

    preview
    code
    <button class="gh-button" type="button">Primary</button>
<button class="gh-button" type="button" data-type="secondary">Secondary</button>
<button class="gh-button" type="button" data-type="tertiary">Tertiary</button>
<button class="gh-button" type="button" data-type="outline-dark">Outline dark</button>
<button class="gh-button" type="button" data-type="outline-light">Outline light</button>
<button class="gh-button" type="button" data-type="success">Success</button>
<button class="gh-button" type="button" data-type="danger">Danger</button>
    data
    [
  {
    "text": "Primary",
    "type": "",
    "action": "button"
  },
  {
    "text": "Secondary",
    "type": "secondary",
    "action": "button"
  },
  {
    "text": "Tertiary",
    "type": "tertiary",
    "action": "button"
  },
  {
    "text": "Outline dark",
    "type": "outline-dark",
    "action": "button"
  },
  {
    "text": "Outline light",
    "type": "outline-light",
    "action": "button"
  },
  {
    "text": "Success",
    "type": "success",
    "action": "button"
  },
  {
    "text": "Danger",
    "type": "danger",
    "action": "button"
  }
]

  • Links

    preview
    code
    <a class="gh-button" href="#">Primary</a>
<a class="gh-button" href="#" data-type="secondary">Secondary</a>
<a class="gh-button" href="#" data-type="tertiary">Tertiary</a>
    data
    [
  {
    "text": "Primary",
    "link": true,
    "url": "#"
  },
  {
    "text": "Secondary",
    "type": "secondary",
    "link": true,
    "url": "#"
  },
  {
    "text": "Tertiary",
    "type": "tertiary",
    "link": true,
    "url": "#"
  }
]

  • Sizes

    preview
    code
    <button class="gh-button" type="button" data-size="small">Small</button>
<button class="gh-button" type="button">Default</button>
    data
    [
  {
    "text": "Small",
    "size": "small",
    "action": "button"
  },
  {
    "text": "Default",
    "size": "",
    "action": "button"
  }
]

  • With icon

    preview
    code
    <button class="gh-button" data-icon="true">Primary<div class="gh-button--icon">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M11.9998 15.075C11.8998 15.075 11.8081 15.0583 11.7248 15.025C11.6415 14.9917 11.5581 14.9333 11.4748 14.85L6.5248 9.9C6.3748 9.75 6.2998 9.575 6.2998 9.375C6.2998 9.175 6.3748 9 6.5248 8.85C6.6748 8.7 6.85397 8.625 7.0623 8.625C7.27064 8.625 7.4498 8.7 7.5998 8.85L11.9998 13.25L16.3998 8.85C16.5498 8.7 16.7248 8.625 16.9248 8.625C17.1248 8.625 17.2998 8.7 17.4498 8.85C17.5998 9 17.6748 9.17917 17.6748 9.3875C17.6748 9.59583 17.5998 9.775 17.4498 9.925L12.5248 14.85C12.4415 14.9333 12.3581 14.9917 12.2748 15.025C12.1915 15.0583 12.0998 15.075 11.9998 15.075Z" fill="currentColor" />
    </svg>
  </div>
</button>
    data
    [
  {
    "text": "Primary",
    "action": "button",
    "icon": "chevron-down"
  }
]