Menu Button Row

WARNING

TODO: replace Tailwind classes, add missing styles to the component, and update the example code accordingly.

Menu-Button Row is a versatile button component designed to display structured information in a row-like format. Similar to a table row, it presents multiple data points while remaining fully interactive and selectable. Ideal for use in menus, lists, or selection interfaces where users need to quickly access detailed information at a glance.

Adding a tooltip improves usability by providing users with clarity about the button's function or purpose.

• Based on the existing Menu Button component.

.c-menu-btn.-is-row[.-is-selected] > .c-menu-btn__remove

Prüfung

Fertigarzneimittel

Bezeichnung

NRF 11.100. Hydrophile Tretinoin-Creme 0,1 % aus Rezeptursubstanz

Prüfung

Fertigarzneimittel

Bezeichnung

NRF 11.100. Hydrophile Tretinoin-Creme 0,1 % aus Rezeptursubstanz

Prüfung

Fertigarzneimittel

Bezeichnung

NRF 11.100. Hydrophile Tretinoin-Creme 0,1 % aus Rezeptursubstanz

Another Example

Custom Style

Title

Grid Template Columns Example

Dokumenten-Nr.

Aö00004

Datum

12.04.2025

WARNING

The code within the c-menu-btn.-is-row is an example that only works with the Tailwind CSS grid system. You can add more content or change the layout via grid-styles as needed as shown in the last example.

Show Code

<div class="c-menu-btn -is-row js-tooltip" data-title="Auswählen" data-placement="right" tabindex="0">
    <div class="h-flex h-flex-row h-vertical-center h-center">
        <span class="c-duotone-icon -md -pruefung" aria-hidden="true"></span>
    </div>
    <div class="tw-flex tw-flex-col tw-px-3 h-border-right-light-gray">
        <p class="h-color-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Prüfung</p>
        <p class="h-type-bold h-type-small">Fertigarzneimittel</p>
    </div>
    <div class="tw-flex tw-flex-col tw-px-3">
        <p class="h-color-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Bezeichnung</p>
        <p class="h-type-bold h-type-small">NRF 11.100. Hydrophile Tretinoin-Creme 0,1 % aus Rezeptursubstanz</p>
    </div>
    <div class="h-flex h-flex-row h-vertical-center h-center">
        <button aria-label="Öffnen und signieren" class="c-btn -icon-btn -small -link -flat">
            <i class="fa-regular fa-arrow-right" aria-hidden="true"></i>
        </button>
    </div>
</div>
    <div class="c-menu-btn -is-row js-tooltip -is-disabled" disabled="disabled" data-title="Bereits verknüpft" data-placement="right" tabindex="0">
    <div class="h-flex h-flex-row h-vertical-center h-center">
        <span class="c-duotone-icon -md -pruefung -is-disabled" aria-hidden="true"></span>
    </div>
    <div class="tw-flex tw-flex-col tw-px-3 h-border-right-light-gray">
        <p class="h-color-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Prüfung</p>
        <p class="h-type-bold h-type-small">Fertigarzneimittel</p>
    </div>
    <div class="tw-flex tw-flex-col tw-px-3">
        <p class="h-color-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Bezeichnung</p>
        <p class="h-type-bold h-type-small">NRF 11.100. Hydrophile Tretinoin-Creme 0,1 % aus Rezeptursubstanz</p>
    </div>
    <div class="h-flex h-flex-row h-vertical-center h-center">
        <button aria-label="Öffnen und signieren" class="c-btn -icon-btn -small -link -flat -disabled" disabled="disabled">
            <i class="fa-regular fa-arrow-right" aria-hidden="true"></i>
        </button>
    </div>
</div>
<div class="c-menu-btn -is-row -is-selected js-tooltip" data-title="Auswählen" data-placement="right" tabindex="0">
    <div class="h-flex h-flex-row h-vertical-center h-center">
        <span class="c-duotone-icon -md -pruefung" aria-hidden="true"></span>
    </div>
    <div class="tw-flex tw-flex-col tw-px-3 h-border-right-light-gray">
        <p class="h-color-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Prüfung</p>
        <p class="h-type-bold h-type-small">Fertigarzneimittel</p>
    </div>
    <div class="tw-flex tw-flex-col tw-px-3">
        <p class="h-color-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Bezeichnung</p>
        <p class="h-type-bold h-type-small">NRF 11.100. Hydrophile Tretinoin-Creme 0,1 % aus Rezeptursubstanz</p>
    </div>
    <div class="h-flex h-flex-row h-vertical-center h-center">
        <button aria-label="Öffnen und signieren" class="c-btn -icon-btn -small -link -flat">
            <i class="fa-regular fa-arrow-right" aria-hidden="true"></i>
        </button>
    </div>
</div>
<div class="c-menu-btn -is-row tw-grid" style="grid-template-columns: auto minmax(4rem, 1fr) minmax(5rem, 2fr) minmax(4rem, 1fr) 6rem auto;" data-placement="right" tabindex="0">
    <button class="c-menu-btn__remove js-tooltip" aria-label="Bereitstellung rückgängig machen" data-title="Bereitstellung rückgängig machen">
        <i class="fa-solid fa-times" aria-hidden="true"></i>
    </button>
    <div class="tw-flex tw-items-center tw-justify-end tw-px-2 lg:tw-pr-4 lg:tw-pl-8">
        <span class="c-duotone-icon -md -pruefung" aria-hidden="true"></span>
    </div>
    <div class="tw-flex tw-flex-col tw-pr-3">
        <p class="h-color-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Another Example</p>
        <p class="h-type-bold h-type-small">Custom Style</p>
    </div>
    <div class="tw-flex tw-flex-col tw-px-2 lg:tw-px-4 h-border-left-light-gray">
        <p class="h-color-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Title</p>
        <p class="h-type-bold h-type-small">Grid Template Columns Example</p>
    </div>
    <div class="tw-flex tw-flex-col tw-px-2 lg:tw-px-4 h-border-left-light-gray">
        <p class="h-color-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">
            Dokumenten-Nr.
        </p>
        <p class="tw-overflow-hidden h-type-bold h-type-small -redesign m-b-0 tw-text-ellipsis">
            Aö00004
        </p>
    </div>
    <div class="tw-flex tw-flex-col tw-px-2 lg:tw-px-4 h-border-left-light-gray">
        <p class="h-color-gray h-type-extra-small -redesign m-b-xxs h-type-bold h-no-wrap h-overflow-ellipsis">Datum</p>
        <p class="h-type-bold h-type-small">12.04.2025</p>
    </div>
    <div class="h-flex h-flex-row h-vertical-center h-center">
        <button aria-label="Öffnen und signieren" class="c-btn -icon-btn -small -link -flat js-tooltip" data-title="Auswählen">
            <i class="fa-regular fa-arrow-right" aria-hidden="true"></i>
        </button>
    </div>
</div>