Button

There are no notes for this item.

<!-- Link color -->
<a class='c-button' href="#">Default</a>

<!-- With Icon -->
<a class='c-button c-button--with-icon c-button--feedback' href="#">With Icon</a>

<!-- Icon Only -->
<a class='c-button c-button--with-icon c-button--icon-only c-button--feedback' href="#">Icon only</a>

<!-- Small -->
<a class='c-button c-button--small' href="#">Small</a>

<!-- Secondary -->
<a class='c-button c-button--secondary' href="#">Secondary</a>

<!-- Muted -->
<a class='c-button c-button--muted' href="#">Muted</a>

<!-- Inverted -->
<a class='c-button c-button--inverted' href="#">Inverted</a>

<!-- Success -->
<a class='c-button c-button--success' href="#">Success</a>

<!-- Notice -->
<a class='c-button c-button--notice' href="#">Notice</a>

<!-- Danger -->
<a class='c-button c-button--error' href="#">Danger</a>

<a class='{{ get_component_class( 'button', display ) }}' href="{{ url }}">{{ text }}</a>
/* Link color */
{
  "text": "Default",
  "url": "#"
}

/* With Icon */
{
  "text": "With Icon",
  "url": "#",
  "display": {
    "modifiers": [
      "with-icon",
      "feedback"
    ]
  }
}

/* Icon Only */
{
  "text": "Icon only",
  "url": "#",
  "display": {
    "modifiers": [
      "with-icon",
      "icon-only",
      "feedback"
    ]
  }
}

/* Small */
{
  "text": "Small",
  "url": "#",
  "display": {
    "modifiers": [
      "small"
    ]
  }
}

/* Secondary */
{
  "text": "Secondary",
  "url": "#",
  "display": {
    "modifiers": [
      "secondary"
    ]
  }
}

/* Muted */
{
  "text": "Muted",
  "url": "#",
  "display": {
    "modifiers": [
      "muted"
    ]
  }
}

/* Inverted */
{
  "text": "Inverted",
  "url": "#",
  "display": {
    "modifiers": [
      "inverted"
    ]
  }
}

/* Success */
{
  "text": "Success",
  "url": "#",
  "display": {
    "modifiers": [
      "success"
    ]
  }
}

/* Notice */
{
  "text": "Notice",
  "url": "#",
  "display": {
    "modifiers": [
      "notice"
    ]
  }
}

/* Danger */
{
  "text": "Danger",
  "url": "#",
  "display": {
    "modifiers": [
      "error"
    ]
  }
}