No notes defined.
<!-- Two Buttons -->
<div class="buttonGroup">
<button class="button"><span class="button-label">Primary Button</span></button>
<button class="button is-secondary"><span class="button-label">Secondary</span></button>
</div>
<!-- Three Buttons -->
<div class="buttonGroup">
<button class="button"><span class="button-label">Primary Button</span></button>
<button class="button is-secondary"><span class="button-label">Secondary</span></button>
<button class="button is-tertiary"><span class="button-label">Tertiary Button</span></button>
</div>
<!-- Single Button -->
<div class="buttonGroup">
<button class="button"><span class="button-label">Single Button</span></button>
</div>
<!-- With Icons -->
<div class="buttonGroup">
<button class="button is-secondary"><svg class="icon is-arrow-left">
<use href="../../icons/icons-bold.svg#icon--arrow-left" xlink:href="../../icons/icons-bold.svg#icon--arrow-left"></use>
</svg>
<span class="button-label">Secondary</span></button>
<button class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Primary Button</span></button>
</div>
<!-- Doc Only -->
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Two Buttons</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="buttonGroup">
<button class="button"><span class="button-label">Primary Button</span></button>
<button class="button is-secondary"><span class="button-label">Secondary</span></button>
</div>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Three Buttons</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="buttonGroup">
<button class="button"><span class="button-label">Primary Button</span></button>
<button class="button is-secondary"><span class="button-label">Secondary</span></button>
<button class="button is-tertiary"><span class="button-label">Tertiary Button</span></button>
</div>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Single Button</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="buttonGroup">
<button class="button"><span class="button-label">Single Button</span></button>
</div>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Buttons with Icons</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="buttonGroup">
<button class="button is-secondary"><svg class="icon is-arrow-left">
<use href="../../icons/icons-bold.svg#icon--arrow-left" xlink:href="../../icons/icons-bold.svg#icon--arrow-left"></use>
</svg>
<span class="button-label">Secondary</span></button>
<button class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Primary Button</span></button>
</div>
</section>
<!-- Two Buttons -->
<div class="buttonGroup{{#modifier}} {{.}}{{/modifier}}">
{{#buttons}}
{{render '@button' (contextData '@buttongroup' this) merge=true}}
{{/buttons}}
</div>
<!-- Three Buttons -->
<div class="buttonGroup{{#modifier}} {{.}}{{/modifier}}">
{{#buttons}}
{{render '@button' (contextData '@buttongroup' this) merge=true}}
{{/buttons}}
</div>
<!-- Single Button -->
<div class="buttonGroup{{#modifier}} {{.}}{{/modifier}}">
{{#buttons}}
{{render '@button' (contextData '@buttongroup' this) merge=true}}
{{/buttons}}
</div>
<!-- With Icons -->
<div class="buttonGroup{{#modifier}} {{.}}{{/modifier}}">
{{#buttons}}
{{render '@button' (contextData '@buttongroup' this) merge=true}}
{{/buttons}}
</div>
<!-- Doc Only -->
{{#variants}}
<section class="doc-variant{{#if narrow-preview}} doc-narrow-content{{/if}}"{{#id}} id="{{.}}"{{/id}}>
<header class="doc-variant-header">
{{#title}}
<h2 class="doc-variant-title">{{{.}}}</h2>
{{/title}}
<div class="doc-variant-configuration">
{{#if modifiers}}
<ul data-label="Modifier">
{{#modifiers}}
<li>{{{.}}}</li>
{{/modifiers}}
</ul>
{{/if}}
</div>
</header>
{{#samples}}
{{render '@buttongroup' (contextData '@buttongroup' this) merge=true}}
{{/samples}}
</section>
{{/variants}}
/* Two Buttons */
{
"buttons": [
{
"label": "Primary Button"
},
{
"label": "Secondary",
"modifier": "is-secondary"
}
]
}
/* Three Buttons */
{
"buttons": [
{
"label": "Primary Button"
},
{
"label": "Secondary",
"modifier": "is-secondary"
},
{
"label": "Tertiary Button",
"modifier": "is-tertiary"
}
]
}
/* Single Button */
{
"buttons": [
{
"label": "Single Button"
}
]
}
/* With Icons */
{
"buttons": [
{
"label": "Secondary",
"modifier": "is-secondary",
"icon": {
"id": "arrow-left",
"weight": "bold"
}
},
{
"label": "Primary Button",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
}
}
]
}
/* Doc Only */
{
"buttons": [
{
"label": "Primary Button"
},
{
"label": "Secondary",
"modifier": "is-secondary"
}
],
"variants": [
{
"title": "Two Buttons",
"samples": {
"buttons": [
{
"label": "Primary Button"
},
{
"label": "Secondary",
"modifier": "is-secondary"
}
]
}
},
{
"title": "Three Buttons",
"samples": {
"buttons": [
{
"label": "Primary Button"
},
{
"label": "Secondary",
"modifier": "is-secondary"
},
{
"label": "Tertiary Button",
"modifier": "is-tertiary"
}
]
}
},
{
"title": "Single Button",
"samples": {
"buttons": [
{
"label": "Single Button"
}
]
}
},
{
"title": "Buttons with Icons",
"samples": {
"buttons": [
{
"label": "Secondary",
"modifier": "is-secondary",
"icon": {
"id": "arrow-left",
"weight": "bold"
}
},
{
"label": "Primary Button",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
}
}
]
}
}
]
}
$buttonGroup_gutter: var(--sp) !default;
@import "_buttonGroup.settings";
@import "_buttonGroup.styles";
%buttonGroup {
.link {
display: flex;
margin-top: 0;
}
@include only-on-mobile(){
.link {
width: 100%;
height: 100%;
}
}
.link:not(:last-child),
&-item:has(.link):not(:last-child) {
margin-right: $buttonGroup_gutter;
}
@include only-on-mobile(){
justify-items: start;
&:has(.link) {
display: flex;
}
&:has(.link) > * {
width: 100%;
.link {
justify-content: center;
}
}
}
}
$buttonGroup_gutter: 1em !default;
$buttonGroup_gutter--mobile: $_page_padding--mobile !default;
$buttonGroup_full-width-breakpoint: 375px !default;
%buttonGroup {
$min-width: calc(.5 * (#{$buttonGroup_full-width-breakpoint} - 2 * var(--pp) - #{$buttonGroup_gutter--mobile}));
@include stack-spacing(component);
display: flex;
flex-wrap: wrap;
gap: $buttonGroup_gutter;
&-item { // Legacy support
display: block;
flex: 0 0 auto;
}
.button {
display: flex;
margin-top: 0;
}
@include only-on-mobile(){
display: grid;
grid-template-columns: 1fr;
grid-auto-flow: row;
gap: $buttonGroup_gutter--mobile;
justify-items: start;
align-items: stretch;
.button {
width: 100%;
height: 100%;
}
&:has(.button:nth-child(1):last-child) {
@media (min-width: $buttonGroup_full-width-breakpoint) {
.button {
width: auto;
min-width: calc(50% - #{.5 * $buttonGroup_gutter--mobile});
}
}
}
&:has(.button:nth-child(2)) {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(#{$min-width}, 1fr));
grid-auto-flow: row;
}
&:has(.button:nth-child(3)) {
grid-auto-flow: row;
grid-template-columns: repeat(auto-fill, minmax(min(100%, $min-width), 1fr));
}
}
}
.buttonGroup {
@extend %buttonGroup;
&-item {
@extend %buttonGroup-item;
}
}