Лэйаут

Spacer

Распорка на flex: 1, растаскивающая соседей по краям. Для скринридеров скрыта.

чистая разметка — библиотеки на странице нет

Members

Код

index.html

<div class="aura-card" style="width:100%;">
  <div class="aura-flex" style="--aura-dir:row;--aura-gap:var(--space-4);--aura-align:center;">
    <h3 class="aura-text aura-text--h3" style="">Members</h3>
    <div class="aura-spacer" aria-hidden="true"></div>
    <button type="button" class="aura-btn aura-btn--secondary">Invite</button>
  </div>
</div>

Разметка выше и есть весь API: обёртки нет ни в одном из четырёх пакетов, потому что компонент здесь поставил бы класс и не добавил ничего. Пишите её как есть, в любом фреймворке.

Пропсы

У чистой разметки нет пропсов — классы ниже и есть весь API. Четыре пакета не делают ничего сверх того, что проставляют вам те же самые классы.

Какие классы отдаёт

Все фреймворки отдают одни и те же классы — именно поэтому четыре библиотеки выглядят одинаково. Их можно использовать напрямую, вообще без библиотеки компонентов.

Класс	Роль	Примечания
.aura-spacer	база	Обязательный. Без него модификатор не работает.

Токены и правила

components.css

растяжение: flex: 1 1 auto
требует: флекс-родителя