BAGS — Design System

All buttons 

<!-- Primary -->
<button type="button" class="btn btn-primary">
    <span class="icon-placeholder "><i class="icon-piggy"></i></span>
    Primary
</button>


<!-- Primary Large -->
<button type="button" class="btn btn-primary btn-lg">
    <span class="icon-placeholder "><i class="icon-piggy"></i></span>
    Primary large
</button>


<!-- Primary Small -->
<button type="button" class="btn btn-primary btn-sm">
    <span class="icon-placeholder "><i class="icon-piggy"></i></span>
    Primary small
</button>


<button type="button" class="btn {{ class }}">
	{% render '@icon', icon %}
	{{ text }}
</button>
 
/* Primary */
{
  "class": "btn-primary",
  "text": "Primary",
  "icon": {
    "image": "piggy"
  }
}


/* Primary Large */
{
  "class": "btn-primary btn-lg",
  "text": "Primary large",
  "icon": {
    "image": "piggy"
  }
}


/* Primary Small */
{
  "class": "btn-primary btn-sm",
  "text": "Primary small",
  "icon": {
    "image": "piggy"
  }
}
  • Handle: @button-with-icon
  • Preview:
  • Filesystem Path: src/components/01-atoms/buttons/button-with-icon/left-big/button-with-icon.njk
  • References (1): @icon

No notes defined.