Topcoat

CSS for clean and fast web apps

Button list

Examples

Show code snippets

HTML

<div class="topcoat-button-list">
  <div class="topcoat-button-list__item">
    <button class="topcoat-button-list__button">One</button>
  </div>
  <div class="topcoat-button-list__item">
    <button class="topcoat-button-list__button">Two</button>
  </div>
  <div class="topcoat-button-list__item">
    <button class="topcoat-button-list__button">Three</button>
  </div>
</div>

CSS

/* Custom behavior to display in list*/
.topcoat-button-list__item {
  width: auto;
  border-radius: 0;
}
/* Custom behavior for top element */
.topcoat-button-list > .topcoat-button-list__item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
/* Custom behavior for bottom element */
.topcoat-button-list > .topcoat-button-list__item:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.topcoat-button-list__item:first-child > .topcoat-button-list__button,
.topcoat-button-list__item:first-child > .topcoat-button-list__button--large {
  border-bottom: none;
}
.topcoat-button-list__item:last-child > .topcoat-button-list__button,
.topcoat-button-list__item:last-child > .topcoat-button-list__button--large {
  border-top: none;
}
.topcoat-button-list__button {
  border-radius: inherit;
}
/* Custom behavior to size to longest text button */
.topcoat-button-list__button,
.topcoat-button-list__button--large {
  width: 100%;
}
.topcoat-button-list__button:focus,
.topcoat-button-list__button--large:focus {
  z-index: 1;
}

Large Button list

Show code snippets

HTML

<div class="topcoat-button-list">
  <div class="topcoat-button-list__item">
    <button class="topcoat-button-list__button--large">One</button>
  </div>
  <div class="topcoat-button-list__item">
    <button class="topcoat-button-list__button--large">Two</button>
  </div>
  <div class="topcoat-button-list__item">
    <button class="topcoat-button-list__button--large">Three</button>
  </div>
</div>

CSS

.topcoat-button-list__button--large {
  border-radius: inherit;
}