SIA Web Design Library

Button

No notes defined.

<!-- 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>


<!-- Small With Icon -->
<a class='c-button c-button--small c-button--with-icon c-button--help' href="#">Small icon</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 ) }}' 
    {% if id %}id="{{ id }}"{% endif %}
    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"
    ]
  }
}


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


/* 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"
    ]
  }
}