Verwendung in Kombination mit dem Wesentlichkeitsanzeiger.
Gruppierte Buttons benötigen einen zusätzlichen Container, siehe das Beispiel Gruppiert.
.materiality-button {
align-items: center;
background-color: #fff;
border: 1px solid $gray;
color: $primary;
display: inline-flex;
gap: $spacer;
padding: $spacer;
text-align: left;
transition: transform .15s ease-in-out;
&:hover {
transform: scale(1.02);
}
&--active {
background-color: $gray-400;
border-color: $primary;
}
.materiality-indicator {
flex-shrink: 0;
}
}
<button class="materiality-button">
<span class="materiality-indicator materiality-indicator--not-material" title="Wesentlich">
Wesentlich
</span>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.
</button>
<button class="materiality-button materiality-button--active">
<span class="materiality-indicator materiality-indicator--not-material" title="Wesentlich">
Wesentlich
</span>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.
</button>
<div class="d-flex flex-column gap-2">
<button class="materiality-button">
<span class="materiality-indicator materiality-indicator--open-material" title="Offen">
Offen
</span>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.
</button>
<button class="materiality-button materiality-button--active">
<span class="materiality-indicator materiality-indicator--material" title="Wesentlich">
Wesentlich
</span>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</button>
<button class="materiality-button">
<span class="materiality-indicator materiality-indicator--not-material" title="Unwesentlich">
Unwesentlich
</span>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui.
</button>
</div>