<div class="grid-container-full sg-color-palettes">
<div class="grid-x">
<h2>Primary</h2>
</div>
<div class="grid-x sg-buttons">
<div class="cell medium-12">
<h3>Text only</h3>
</div>
<div class="cell medium-6 sg-bg-light">
<a href="#" class="button-p1 button-p1--default " role="button">Primary</a>
</div>
<div class="cell medium-6 sg-bg-dark bg-inverted">
<a href="#" class="button-p1 button-p1--default " role="button">Primary</a>
</div>
<div class="cell medium-6 sg-bg-light">
<a href="#" class="button-p1 button-p1--default disabled" role="button">Primary</a>
</div>
<div class="cell medium-6 sg-bg-dark bg-inverted">
<a href="#" class="button-p1 button-p1--default disabled" role="button">Primary</a>
</div>
</div>
<div class="grid-x sg-buttons">
<div class="cell medium-12">
<h3>Small</h3>
</div>
<div class="cell medium-6 sg-bg-light">
<a href="#" class="button-p1 button-p1--small " role="button">Primary Small</a>
</div>
<div class="cell medium-6 sg-bg-dark bg-inverted">
<a href="#" class="button-p1 button-p1--small " role="button">Primary Small</a>
</div>
<div class="cell medium-6 sg-bg-light">
<a href="#" class="button-p1 button-p1--small disabled" role="button">Primary Small</a>
</div>
<div class="cell medium-6 sg-bg-dark bg-inverted">
<a href="#" class="button-p1 button-p1--small disabled" role="button">Primary Small</a>
</div>
</div>
<div class="grid-x sg-buttons">
<div class="cell medium-12">
<h3>Text with icon</h3>
</div>
<div class="cell medium-6 sg-bg-light">
<a href="#" class="button-p1 button-p1--with-icon " role="button">Primary</a>
</div>
<div class="cell medium-6 sg-bg-dark bg-inverted">
<a href="#" class="button-p1 button-p1--with-icon " role="button">Primary</a>
</div>
<div class="cell medium-6 sg-bg-light">
<a href="#" class="button-p1 button-p1--with-icon disabled" role="button">Primary</a>
</div>
<div class="cell medium-6 sg-bg-dark bg-inverted">
<a href="#" class="button-p1 button-p1--with-icon disabled" role="button">Primary</a>
</div>
</div>
<div class="grid-x sg-buttons">
<div class="cell medium-12">
<h3>Icon only</h3>
</div>
<div class="cell medium-6 sg-bg-light">
</div>
<div class="cell medium-6 sg-bg-dark bg-inverted">
</div>
<div class="cell medium-6 sg-bg-light">
</div>
<div class="cell medium-6 sg-bg-dark bg-inverted">
</div>
</div>
<div class="grid-x">
<h2>Secondary</h2>
</div>
<div class="grid-x sg-buttons">
<div class="cell medium-12">
<h3>Text only</h3>
</div>
<div class="cell medium-6 sg-bg-light">
<a href="#" class="button-p2 button-p2--default " role="button">Secondary</a>
</div>
<div class="cell medium-6 sg-bg-dark bg-inverted">
<a href="#" class="button-p2 button-p2--default " role="button">Secondary</a>
</div>
<div class="cell medium-6 sg-bg-light">
<a href="#" class="button-p2 button-p2--default disabled" role="button">Secondary</a>
</div>
<div class="cell medium-6 sg-bg-dark bg-inverted">
<a href="#" class="button-p2 button-p2--default disabled" role="button">Secondary</a>
</div>
</div>
<div class="grid-x sg-buttons">
<div class="cell medium-12">
<h3>Small</h3>
</div>
<div class="cell medium-6 sg-bg-light">
<a href="#" class="button-p2 button-p2--small " role="button">Secondary Small</a>
</div>
<div class="cell medium-6 sg-bg-dark bg-inverted">
<a href="#" class="button-p2 button-p2--small " role="button">Secondary Small</a>
</div>
<div class="cell medium-6 sg-bg-light">
<a href="#" class="button-p2 button-p2--small disabled" role="button">Secondary Small</a>
</div>
<div class="cell medium-6 sg-bg-dark bg-inverted">
<a href="#" class="button-p2 button-p2--small disabled" role="button">Secondary Small</a>
</div>
</div>
<div class="grid-x sg-buttons">
<div class="cell medium-12">
<h3>Text with icon</h3>
</div>
<div class="cell medium-6 sg-bg-light">
<a href="#" class="button-p2 button-p2--with-icon " role="button">Secondary</a>
</div>
<div class="cell medium-6 sg-bg-dark bg-inverted">
<a href="#" class="button-p2 button-p2--with-icon " role="button">Secondary</a>
</div>
<div class="cell medium-6 sg-bg-light">
<a href="#" class="button-p2 button-p2--with-icon disabled" role="button">Secondary</a>
</div>
<div class="cell medium-6 sg-bg-dark bg-inverted">
<a href="#" class="button-p2 button-p2--with-icon disabled" role="button">Secondary</a>
</div>
</div>
<div class="grid-x sg-buttons">
<div class="cell medium-12">
<h3>Warning</h3>
</div>
<div class="cell medium-6 sg-bg-light">
<a href="#" class="button-p2 button-p2--warning " role="button">Warning Button</a>
</div>
<div class="cell medium-6 sg-bg-dark bg-inverted">
<a href="#" class="button-p2 button-p2--warning " role="button">Warning Button</a>
</div>
<div class="cell medium-6 sg-bg-light">
<a href="#" class="button-p2 button-p2--warning disabled" role="button">Warning Button</a>
</div>
<div class="cell medium-6 sg-bg-dark bg-inverted">
<a href="#" class="button-p2 button-p2--warning disabled" role="button">Warning Button</a>
</div>
</div>
<div class="grid-x sg-buttons">
<div class="cell medium-12">
<h3>Icon only</h3>
</div>
<div class="cell medium-6 sg-bg-light">
</div>
<div class="cell medium-6 sg-bg-dark bg-inverted">
</div>
<div class="cell medium-6 sg-bg-light">
</div>
<div class="cell medium-6 sg-bg-dark bg-inverted">
</div>
</div>
<div class="grid-x">
<h2>Tertiary</h2>
</div>
<div class="grid-x sg-buttons">
<div class="cell medium-12">
<h3>Text only</h3>
</div>
<div class="cell medium-6 sg-bg-light">
<a href="#" class="button-p3 button-p3--default " role="button">Tertiary
<svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2929 1.2928C12.6834 0.902276 13.3166 0.902276 13.7071 1.2928L18.7074 6.29306C19.0979 6.68358 19.0979 7.31675 18.7074 7.70727C18.3168 8.0978 17.6837 8.0978 17.2931 7.70727L12.2929 2.70701C11.9024 2.31649 11.9024 1.68332 12.2929 1.2928Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 6.00003L17 6.00003C17.5523 6.00003 18 6.44775 18 7.00003C18 7.55232 17.5523 8.00003 17 8.00003L1 8.00003C0.447715 8.00003 -7.61005e-08 7.55232 -8.74229e-08 7.00003C-3.91406e-08 6.44775 0.447715 6.00003 1 6.00003Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6347 7.77952L13.7068 12.7074C13.3163 13.0979 12.6832 13.0979 12.2926 12.7074C11.9021 12.3168 11.9021 11.6837 12.2926 11.2932L17.2205 6.36531C17.611 5.97479 18.2442 5.97479 18.6347 6.36531C19.0252 6.75584 19.0252 7.389 18.6347 7.77952Z" />
</svg>
</a>
</div>
<div class="cell medium-6 sg-bg-dark bg-inverted">
<a href="#" class="button-p3 button-p3--default " role="button">Tertiary
<svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2929 1.2928C12.6834 0.902276 13.3166 0.902276 13.7071 1.2928L18.7074 6.29306C19.0979 6.68358 19.0979 7.31675 18.7074 7.70727C18.3168 8.0978 17.6837 8.0978 17.2931 7.70727L12.2929 2.70701C11.9024 2.31649 11.9024 1.68332 12.2929 1.2928Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 6.00003L17 6.00003C17.5523 6.00003 18 6.44775 18 7.00003C18 7.55232 17.5523 8.00003 17 8.00003L1 8.00003C0.447715 8.00003 -7.61005e-08 7.55232 -8.74229e-08 7.00003C-3.91406e-08 6.44775 0.447715 6.00003 1 6.00003Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6347 7.77952L13.7068 12.7074C13.3163 13.0979 12.6832 13.0979 12.2926 12.7074C11.9021 12.3168 11.9021 11.6837 12.2926 11.2932L17.2205 6.36531C17.611 5.97479 18.2442 5.97479 18.6347 6.36531C19.0252 6.75584 19.0252 7.389 18.6347 7.77952Z" />
</svg>
</a>
</div>
<div class="cell medium-6 sg-bg-light">
<a href="#" class="button-p3 button-p3--default disabled" role="button">Tertiary
<svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2929 1.2928C12.6834 0.902276 13.3166 0.902276 13.7071 1.2928L18.7074 6.29306C19.0979 6.68358 19.0979 7.31675 18.7074 7.70727C18.3168 8.0978 17.6837 8.0978 17.2931 7.70727L12.2929 2.70701C11.9024 2.31649 11.9024 1.68332 12.2929 1.2928Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 6.00003L17 6.00003C17.5523 6.00003 18 6.44775 18 7.00003C18 7.55232 17.5523 8.00003 17 8.00003L1 8.00003C0.447715 8.00003 -7.61005e-08 7.55232 -8.74229e-08 7.00003C-3.91406e-08 6.44775 0.447715 6.00003 1 6.00003Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6347 7.77952L13.7068 12.7074C13.3163 13.0979 12.6832 13.0979 12.2926 12.7074C11.9021 12.3168 11.9021 11.6837 12.2926 11.2932L17.2205 6.36531C17.611 5.97479 18.2442 5.97479 18.6347 6.36531C19.0252 6.75584 19.0252 7.389 18.6347 7.77952Z" />
</svg>
</a>
</div>
<div class="cell medium-6 sg-bg-dark bg-inverted">
<a href="#" class="button-p3 button-p3--default disabled" role="button">Tertiary
<svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2929 1.2928C12.6834 0.902276 13.3166 0.902276 13.7071 1.2928L18.7074 6.29306C19.0979 6.68358 19.0979 7.31675 18.7074 7.70727C18.3168 8.0978 17.6837 8.0978 17.2931 7.70727L12.2929 2.70701C11.9024 2.31649 11.9024 1.68332 12.2929 1.2928Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 6.00003L17 6.00003C17.5523 6.00003 18 6.44775 18 7.00003C18 7.55232 17.5523 8.00003 17 8.00003L1 8.00003C0.447715 8.00003 -7.61005e-08 7.55232 -8.74229e-08 7.00003C-3.91406e-08 6.44775 0.447715 6.00003 1 6.00003Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6347 7.77952L13.7068 12.7074C13.3163 13.0979 12.6832 13.0979 12.2926 12.7074C11.9021 12.3168 11.9021 11.6837 12.2926 11.2932L17.2205 6.36531C17.611 5.97479 18.2442 5.97479 18.6347 6.36531C19.0252 6.75584 19.0252 7.389 18.6347 7.77952Z" />
</svg>
</a>
</div>
</div>
<div class="grid-x sg-buttons">
<div class="cell medium-12">
<h3>Text with icon</h3>
</div>
<div class="cell medium-6 sg-bg-light">
<a href="#" class="button-p3 button-p3--with-icon " role="button">Tertiary
<svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2929 1.2928C12.6834 0.902276 13.3166 0.902276 13.7071 1.2928L18.7074 6.29306C19.0979 6.68358 19.0979 7.31675 18.7074 7.70727C18.3168 8.0978 17.6837 8.0978 17.2931 7.70727L12.2929 2.70701C11.9024 2.31649 11.9024 1.68332 12.2929 1.2928Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 6.00003L17 6.00003C17.5523 6.00003 18 6.44775 18 7.00003C18 7.55232 17.5523 8.00003 17 8.00003L1 8.00003C0.447715 8.00003 -7.61005e-08 7.55232 -8.74229e-08 7.00003C-3.91406e-08 6.44775 0.447715 6.00003 1 6.00003Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6347 7.77952L13.7068 12.7074C13.3163 13.0979 12.6832 13.0979 12.2926 12.7074C11.9021 12.3168 11.9021 11.6837 12.2926 11.2932L17.2205 6.36531C17.611 5.97479 18.2442 5.97479 18.6347 6.36531C19.0252 6.75584 19.0252 7.389 18.6347 7.77952Z" />
</svg>
</a>
</div>
<div class="cell medium-6 sg-bg-dark bg-inverted">
<a href="#" class="button-p3 button-p3--with-icon " role="button">Tertiary
<svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2929 1.2928C12.6834 0.902276 13.3166 0.902276 13.7071 1.2928L18.7074 6.29306C19.0979 6.68358 19.0979 7.31675 18.7074 7.70727C18.3168 8.0978 17.6837 8.0978 17.2931 7.70727L12.2929 2.70701C11.9024 2.31649 11.9024 1.68332 12.2929 1.2928Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 6.00003L17 6.00003C17.5523 6.00003 18 6.44775 18 7.00003C18 7.55232 17.5523 8.00003 17 8.00003L1 8.00003C0.447715 8.00003 -7.61005e-08 7.55232 -8.74229e-08 7.00003C-3.91406e-08 6.44775 0.447715 6.00003 1 6.00003Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6347 7.77952L13.7068 12.7074C13.3163 13.0979 12.6832 13.0979 12.2926 12.7074C11.9021 12.3168 11.9021 11.6837 12.2926 11.2932L17.2205 6.36531C17.611 5.97479 18.2442 5.97479 18.6347 6.36531C19.0252 6.75584 19.0252 7.389 18.6347 7.77952Z" />
</svg>
</a>
</div>
<div class="cell medium-6 sg-bg-light">
<a href="#" class="button-p3 button-p3--with-icon disabled" role="button">Tertiary
<svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2929 1.2928C12.6834 0.902276 13.3166 0.902276 13.7071 1.2928L18.7074 6.29306C19.0979 6.68358 19.0979 7.31675 18.7074 7.70727C18.3168 8.0978 17.6837 8.0978 17.2931 7.70727L12.2929 2.70701C11.9024 2.31649 11.9024 1.68332 12.2929 1.2928Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 6.00003L17 6.00003C17.5523 6.00003 18 6.44775 18 7.00003C18 7.55232 17.5523 8.00003 17 8.00003L1 8.00003C0.447715 8.00003 -7.61005e-08 7.55232 -8.74229e-08 7.00003C-3.91406e-08 6.44775 0.447715 6.00003 1 6.00003Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6347 7.77952L13.7068 12.7074C13.3163 13.0979 12.6832 13.0979 12.2926 12.7074C11.9021 12.3168 11.9021 11.6837 12.2926 11.2932L17.2205 6.36531C17.611 5.97479 18.2442 5.97479 18.6347 6.36531C19.0252 6.75584 19.0252 7.389 18.6347 7.77952Z" />
</svg>
</a>
</div>
<div class="cell medium-6 sg-bg-dark bg-inverted">
<a href="#" class="button-p3 button-p3--with-icon disabled" role="button">Tertiary
<svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2929 1.2928C12.6834 0.902276 13.3166 0.902276 13.7071 1.2928L18.7074 6.29306C19.0979 6.68358 19.0979 7.31675 18.7074 7.70727C18.3168 8.0978 17.6837 8.0978 17.2931 7.70727L12.2929 2.70701C11.9024 2.31649 11.9024 1.68332 12.2929 1.2928Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 6.00003L17 6.00003C17.5523 6.00003 18 6.44775 18 7.00003C18 7.55232 17.5523 8.00003 17 8.00003L1 8.00003C0.447715 8.00003 -7.61005e-08 7.55232 -8.74229e-08 7.00003C-3.91406e-08 6.44775 0.447715 6.00003 1 6.00003Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6347 7.77952L13.7068 12.7074C13.3163 13.0979 12.6832 13.0979 12.2926 12.7074C11.9021 12.3168 11.9021 11.6837 12.2926 11.2932L17.2205 6.36531C17.611 5.97479 18.2442 5.97479 18.6347 6.36531C19.0252 6.75584 19.0252 7.389 18.6347 7.77952Z" />
</svg>
</a>
</div>
</div>
<div class="grid-x sg-buttons">
<div class="cell medium-12">
<h3>Icon only</h3>
</div>
<div class="cell medium-6 sg-bg-light">
<a href="#" class="button-p3 button-p3--icon-only " role="button">
<svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2929 1.2928C12.6834 0.902276 13.3166 0.902276 13.7071 1.2928L18.7074 6.29306C19.0979 6.68358 19.0979 7.31675 18.7074 7.70727C18.3168 8.0978 17.6837 8.0978 17.2931 7.70727L12.2929 2.70701C11.9024 2.31649 11.9024 1.68332 12.2929 1.2928Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 6.00003L17 6.00003C17.5523 6.00003 18 6.44775 18 7.00003C18 7.55232 17.5523 8.00003 17 8.00003L1 8.00003C0.447715 8.00003 -7.61005e-08 7.55232 -8.74229e-08 7.00003C-3.91406e-08 6.44775 0.447715 6.00003 1 6.00003Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6347 7.77952L13.7068 12.7074C13.3163 13.0979 12.6832 13.0979 12.2926 12.7074C11.9021 12.3168 11.9021 11.6837 12.2926 11.2932L17.2205 6.36531C17.611 5.97479 18.2442 5.97479 18.6347 6.36531C19.0252 6.75584 19.0252 7.389 18.6347 7.77952Z" />
</svg>
</a>
</div>
<div class="cell medium-6 sg-bg-dark bg-inverted">
<a href="#" class="button-p3 button-p3--icon-only " role="button">
<svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2929 1.2928C12.6834 0.902276 13.3166 0.902276 13.7071 1.2928L18.7074 6.29306C19.0979 6.68358 19.0979 7.31675 18.7074 7.70727C18.3168 8.0978 17.6837 8.0978 17.2931 7.70727L12.2929 2.70701C11.9024 2.31649 11.9024 1.68332 12.2929 1.2928Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 6.00003L17 6.00003C17.5523 6.00003 18 6.44775 18 7.00003C18 7.55232 17.5523 8.00003 17 8.00003L1 8.00003C0.447715 8.00003 -7.61005e-08 7.55232 -8.74229e-08 7.00003C-3.91406e-08 6.44775 0.447715 6.00003 1 6.00003Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6347 7.77952L13.7068 12.7074C13.3163 13.0979 12.6832 13.0979 12.2926 12.7074C11.9021 12.3168 11.9021 11.6837 12.2926 11.2932L17.2205 6.36531C17.611 5.97479 18.2442 5.97479 18.6347 6.36531C19.0252 6.75584 19.0252 7.389 18.6347 7.77952Z" />
</svg>
</a>
</div>
<div class="cell medium-6 sg-bg-light">
<a href="#" class="button-p3 button-p3--icon-only disabled" role="button">
<svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2929 1.2928C12.6834 0.902276 13.3166 0.902276 13.7071 1.2928L18.7074 6.29306C19.0979 6.68358 19.0979 7.31675 18.7074 7.70727C18.3168 8.0978 17.6837 8.0978 17.2931 7.70727L12.2929 2.70701C11.9024 2.31649 11.9024 1.68332 12.2929 1.2928Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 6.00003L17 6.00003C17.5523 6.00003 18 6.44775 18 7.00003C18 7.55232 17.5523 8.00003 17 8.00003L1 8.00003C0.447715 8.00003 -7.61005e-08 7.55232 -8.74229e-08 7.00003C-3.91406e-08 6.44775 0.447715 6.00003 1 6.00003Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6347 7.77952L13.7068 12.7074C13.3163 13.0979 12.6832 13.0979 12.2926 12.7074C11.9021 12.3168 11.9021 11.6837 12.2926 11.2932L17.2205 6.36531C17.611 5.97479 18.2442 5.97479 18.6347 6.36531C19.0252 6.75584 19.0252 7.389 18.6347 7.77952Z" />
</svg>
</a>
</div>
<div class="cell medium-6 sg-bg-dark bg-inverted">
<a href="#" class="button-p3 button-p3--icon-only disabled" role="button">
<svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2929 1.2928C12.6834 0.902276 13.3166 0.902276 13.7071 1.2928L18.7074 6.29306C19.0979 6.68358 19.0979 7.31675 18.7074 7.70727C18.3168 8.0978 17.6837 8.0978 17.2931 7.70727L12.2929 2.70701C11.9024 2.31649 11.9024 1.68332 12.2929 1.2928Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 6.00003L17 6.00003C17.5523 6.00003 18 6.44775 18 7.00003C18 7.55232 17.5523 8.00003 17 8.00003L1 8.00003C0.447715 8.00003 -7.61005e-08 7.55232 -8.74229e-08 7.00003C-3.91406e-08 6.44775 0.447715 6.00003 1 6.00003Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6347 7.77952L13.7068 12.7074C13.3163 13.0979 12.6832 13.0979 12.2926 12.7074C11.9021 12.3168 11.9021 11.6837 12.2926 11.2932L17.2205 6.36531C17.611 5.97479 18.2442 5.97479 18.6347 6.36531C19.0252 6.75584 19.0252 7.389 18.6347 7.77952Z" />
</svg>
</a>
</div>
</div>
</div>
<div class="grid-container-full sg-color-palettes">
<div class="grid-x">
<h2>{{primary.title}}</h2>
</div>
{{#each primary.sets}}
<div class="grid-x sg-buttons">
<div class="cell medium-12">
<h3>{{title}}</h3>
</div>
{{#each states}}
<div class="cell medium-6 sg-bg-light">
{{render "@cp-button-primary" this}}
</div>
<div class="cell medium-6 sg-bg-dark bg-inverted">
{{render "@cp-button-primary" this}}
</div>
{{/each}}
</div>
{{/each}}
<div class="grid-x">
<h2>{{secondary.title}}</h2>
</div>
{{#each secondary.sets}}
<div class="grid-x sg-buttons">
<div class="cell medium-12">
<h3>{{title}}</h3>
</div>
{{#each states}}
<div class="cell medium-6 sg-bg-light">
{{render "@cp-button-secondary" this}}
</div>
<div class="cell medium-6 sg-bg-dark bg-inverted">
{{render "@cp-button-secondary" this}}
</div>
{{/each}}
</div>
{{/each}}
<div class="grid-x">
<h2>{{tertiary.title}}</h2>
</div>
{{#each tertiary.sets}}
<div class="grid-x sg-buttons">
<div class="cell medium-12">
<h3>{{title}}</h3>
</div>
{{#each states}}
<div class="cell medium-6 sg-bg-light">
{{render "@cp-button-tertiary" this}}
</div>
<div class="cell medium-6 sg-bg-dark bg-inverted">
{{render "@cp-button-tertiary" this}}
</div>
{{/each}}
</div>
{{/each}}
</div>
{
"primary": {
"title": "Primary",
"sets": [
{
"title": "Text only",
"states": [
{
"modifier": "default",
"url": "#",
"text": "Primary"
},
{
"modifier": "default",
"disabled": true,
"url": "#",
"text": "Primary"
}
]
},
{
"title": "Small",
"states": [
{
"modifier": "small",
"url": "#",
"text": "Primary Small"
},
{
"modifier": "small",
"disabled": true,
"url": "#",
"text": "Primary Small"
}
]
},
{
"title": "Text with icon",
"states": [
{
"modifier": "with-icon",
"url": "#",
"text": "Primary"
},
{
"modifier": "with-icon",
"disabled": true,
"url": "#",
"text": "Primary"
}
]
},
{
"title": "Icon only",
"states": [
{
"modifier": "icon-only",
"url": "#",
"text": ""
},
{
"modifier": "icon-only",
"disabled": true,
"url": "#",
"text": ""
}
]
}
]
},
"secondary": {
"title": "Secondary",
"sets": [
{
"title": "Text only",
"states": [
{
"modifier": "default",
"url": "#",
"text": "Secondary"
},
{
"modifier": "default",
"disabled": true,
"url": "#",
"text": "Secondary"
}
]
},
{
"title": "Small",
"states": [
{
"modifier": "small",
"url": "#",
"text": "Secondary Small"
},
{
"modifier": "small",
"disabled": true,
"url": "#",
"text": "Secondary Small"
}
]
},
{
"title": "Text with icon",
"states": [
{
"modifier": "with-icon",
"url": "#",
"text": "Secondary"
},
{
"modifier": "with-icon",
"disabled": true,
"url": "#",
"text": "Secondary"
}
]
},
{
"title": "Warning",
"states": [
{
"modifier": "warning",
"url": "#",
"text": "Warning Button"
},
{
"modifier": "warning",
"disabled": true,
"url": "#",
"text": "Warning Button"
}
]
},
{
"title": "Icon only",
"states": [
{
"modifier": "icon-only",
"url": "#",
"text": ""
},
{
"modifier": "icon-only",
"disabled": true,
"url": "#",
"text": ""
}
]
}
]
},
"tertiary": {
"title": "Tertiary",
"sets": [
{
"title": "Text only",
"states": [
{
"modifier": "default",
"url": "#",
"text": "Tertiary"
},
{
"modifier": "default",
"disabled": true,
"url": "#",
"text": "Tertiary"
}
]
},
{
"title": "Text with icon",
"states": [
{
"modifier": "with-icon",
"url": "#",
"text": "Tertiary"
},
{
"modifier": "with-icon",
"disabled": true,
"url": "#",
"text": "Tertiary"
}
]
},
{
"title": "Icon only",
"states": [
{
"modifier": "icon-only",
"url": "#",
"text": ""
},
{
"modifier": "icon-only",
"disabled": true,
"url": "#",
"text": ""
}
]
}
]
}
}
There are no notes for this item.