Movatterモバイル変換

[0]ホーム
URL:

Button group

Tailwind CSS Button Group

Use responsive button group component with helper examples for radio button group, toolbars, outline styles, colors & more. Free download, open-source license.

Basic examples

Radio buttons are a popular way to allow users to make a single selection & should be used instead of checkboxes if only one item can be selected from a list of options.

Group a series of buttons together on a single line using the following code.

                  <div        class="inline-flex rounded-md shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-1 dark:focus:shadow-dark-1 dark:active:shadow-dark-1"        role="group">        <button          type="button"          class="inline-block rounded-s bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-primary-accent-300 focus:bg-primary-accent-300 focus:outline-none focus:ring-0 active:bg-primary-600 motion-reduce:transition-none"          data-twe-ripple-init          data-twe-ripple-color="light">          Left        </button>        <button          type="button"          class="inline-block bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-primary-accent-300 focus:bg-primary-accent-300 focus:outline-none focus:ring-0 active:bg-primary-600 motion-reduce:transition-none"          data-twe-ripple-init          data-twe-ripple-color="light">          Middle        </button>        <button          type="button"          class="inline-block rounded-e bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-primary-accent-300 focus:bg-primary-accent-300 focus:outline-none focus:ring-0 active:bg-primary-600 motion-reduce:transition-none"          data-twe-ripple-init          data-twe-ripple-color="light">          Right        </button>      </div>
                  // Initialization for ES Users      import {        Ripple,        initTWE,      } from "tw-elements";            initTWE({ Ripple });

Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers.Every share counts, thank you!

Active state

Use.active class to check a radio button by default.

                  <div        class="inline-flex rounded-md shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-1 dark:focus:shadow-dark-1 dark:active:shadow-dark-1"        role="group">        <button          type="button"          class="inline-block rounded-s bg-primary-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-primary-accent-300 focus:bg-primary-accent-300 focus:outline-none focus:ring-0 active:bg-primary-600 motion-reduce:transition-none"          data-twe-ripple-init          data-twe-ripple-color="light">          Left        </button>        <button          type="button"          class="inline-block bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-primary-accent-300 focus:bg-primary-accent-300 focus:outline-none focus:ring-0 active:bg-primary-600 motion-reduce:transition-none"          data-twe-ripple-init          data-twe-ripple-color="light">          Middle        </button>        <button          type="button"          class="inline-block rounded-e bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-primary-accent-300 focus:bg-primary-accent-300 focus:outline-none focus:ring-0 active:bg-primary-600 motion-reduce:transition-none"          data-twe-ripple-init          data-twe-ripple-color="light">          Right        </button>      </div>
                  // Initialization for ES Users      import {        Ripple,        initTWE,      } from "tw-elements";            initTWE({ Ripple });

Outline styles

Use the following button group styles to show the colors only for the border of the elements.

                  <div class="inline-flex" role="group">        <button          type="button"          class="inline-block rounded-s border-2 border-primary-100 px-6 pb-[6px] pt-2 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:border-primary-accent-200 hover:bg-secondary-50/50 focus:border-primary-accent-200 focus:bg-secondary-50/50 focus:outline-none focus:ring-0 active:border-primary-accent-200 motion-reduce:transition-none dark:border-primary-400 dark:text-primary-300 dark:hover:bg-blue-950 dark:focus:bg-blue-950"          data-twe-ripple-init          data-twe-ripple-color="light">          Left        </button>        <button          type="button"          class="-ms-0.5 inline-block border-2 border-primary-100 px-6 pb-[6px] pt-2 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:border-primary-accent-200 hover:bg-secondary-50/50 focus:border-primary-accent-200 focus:bg-secondary-50/50 focus:outline-none focus:ring-0 active:border-primary-accent-200 motion-reduce:transition-none dark:border-primary-400 dark:text-primary-300 dark:hover:bg-blue-950 dark:focus:bg-blue-950"          data-twe-ripple-init          data-twe-ripple-color="light">          Middle        </button>        <button          type="button"          class="-ms-0.5 inline-block rounded-e border-2 border-primary-100 px-6 pb-[6px] pt-2 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:border-primary-accent-200 hover:bg-secondary-50/50 focus:border-primary-accent-200 focus:bg-secondary-50/50 focus:outline-none focus:ring-0 active:border-primary-accent-200 motion-reduce:transition-none dark:border-primary-400 dark:text-primary-300 dark:hover:bg-blue-950 dark:focus:bg-blue-950"          data-twe-ripple-init          data-twe-ripple-color="light">          Right        </button>      </div>
                  // Initialization for ES Users      import {        Ripple,        initTWE,      } from "tw-elements";            initTWE({ Ripple });

Toolbar

For more complex components, combine a set of button groups into a toolbar. Use utility classes to organize groups, buttons, and other elements.

                  <div        class="inline-flex rounded-md shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-1 dark:focus:shadow-dark-1 dark:active:shadow-dark-1"        role="toolbar">        <button          type="button"          class="inline-block rounded-s bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-primary-accent-300 focus:bg-primary-accent-300 focus:outline-none focus:ring-0 active:bg-primary-600 motion-reduce:transition-none"          data-twe-ripple-init          data-twe-ripple-color="light">          1        </button>        <button          type="button"          class="inline-block bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-primary-accent-300 focus:bg-primary-accent-300 focus:outline-none focus:ring-0 active:bg-primary-600 motion-reduce:transition-none"          data-twe-ripple-init          data-twe-ripple-color="light">          2        </button>        <button          type="button"          class="inline-block bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-primary-accent-300 focus:bg-primary-accent-300 focus:outline-none focus:ring-0 active:bg-primary-600 motion-reduce:transition-none"          data-twe-ripple-init          data-twe-ripple-color="light">          3        </button>        <button          type="button"          class="inline-block bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-primary-accent-300 focus:bg-primary-accent-300 focus:outline-none focus:ring-0 active:bg-primary-600 motion-reduce:transition-none"          data-twe-ripple-init          data-twe-ripple-color="light">          4        </button>        <button          type="button"          class="inline-block rounded-e bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-primary-accent-300 focus:bg-primary-accent-300 focus:outline-none focus:ring-0 active:bg-primary-600 motion-reduce:transition-none"          data-twe-ripple-init          data-twe-ripple-color="light">          5        </button>      </div>
                  // Initialization for ES Users      import {        Ripple,        initTWE,      } from "tw-elements";            initTWE({ Ripple });

Sizing

Use these examples if you want to use smaller or larger buttons groups.

                  <div        class="inline-flex rounded-md shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-1 dark:focus:shadow-dark-1 dark:active:shadow-dark-1"        role="group">        <button          type="button"          class="inline-block rounded-s bg-primary px-7 pb-2.5 pt-3 text-sm font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-primary-accent-300 focus:bg-primary-accent-300 focus:outline-none focus:ring-0 active:bg-primary-600 motion-reduce:transition-none"          data-twe-ripple-init          data-twe-ripple-color="light">          Left        </button>        <button          type="button"          class="inline-block bg-primary px-7 pb-2.5 pt-3 text-sm font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-primary-accent-300 focus:bg-primary-accent-300 focus:outline-none focus:ring-0 active:bg-primary-600 motion-reduce:transition-none"          data-twe-ripple-init          data-twe-ripple-color="light">          Middle        </button>        <button          type="button"          class="inline-block rounded-e bg-primary px-7 pb-2.5 pt-3 text-sm font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-primary-accent-300 focus:bg-primary-accent-300 focus:outline-none focus:ring-0 active:bg-primary-600 motion-reduce:transition-none"          data-twe-ripple-init          data-twe-ripple-color="light">          Right        </button>      </div>      <div        class="inline-flex rounded-md shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-1 dark:focus:shadow-dark-1 dark:active:shadow-dark-1"        role="group">        <button          type="button"          class="inline-block rounded-s bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-primary-accent-300 focus:bg-primary-accent-300 focus:outline-none focus:ring-0 active:bg-primary-600 motion-reduce:transition-none"          data-twe-ripple-init          data-twe-ripple-color="light">          Left        </button>        <button          type="button"          class="inline-block bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-primary-accent-300 focus:bg-primary-accent-300 focus:outline-none focus:ring-0 active:bg-primary-600 motion-reduce:transition-none"          data-twe-ripple-init          data-twe-ripple-color="light">          Middle        </button>        <button          type="button"          class="inline-block rounded-e bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-primary-accent-300 focus:bg-primary-accent-300 focus:outline-none focus:ring-0 active:bg-primary-600 motion-reduce:transition-none"          data-twe-ripple-init          data-twe-ripple-color="light">          Right        </button>      </div>      <div        class="inline-flex rounded-md shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-1 dark:focus:shadow-dark-1 dark:active:shadow-dark-1"        role="group">        <button          type="button"          class="inline-block rounded-s bg-primary px-4 pb-[5px] pt-[6px] text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-primary-accent-300 focus:bg-primary-accent-300 focus:outline-none focus:ring-0 active:bg-primary-600 motion-reduce:transition-none"          data-twe-ripple-init          data-twe-ripple-color="light">          Left        </button>        <button          type="button"          class="inline-block bg-primary px-4 pb-[5px] pt-[6px] text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-primary-accent-300 focus:bg-primary-accent-300 focus:outline-none focus:ring-0 active:bg-primary-600 motion-reduce:transition-none"          data-twe-ripple-init          data-twe-ripple-color="light">          Middle        </button>        <button          type="button"          class="inline-block rounded-e bg-primary px-4 pb-[5px] pt-[6px] text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-primary-accent-300 focus:bg-primary-accent-300 focus:outline-none focus:ring-0 active:bg-primary-600 motion-reduce:transition-none"          data-twe-ripple-init          data-twe-ripple-color="light">          Right        </button>      </div>
                  // Initialization for ES Users      import {        Ripple,        initTWE,      } from "tw-elements";            initTWE({ Ripple });

Colors

Choose from several predefined button group styles, each serving its own semantic purpose, with a few extras thrown in for more control.

                  <div class="mb-4 flex items-center justify-center">        <div          class="inline-flex rounded-md shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-1 dark:focus:shadow-dark-1 dark:active:shadow-dark-1"          role="group">          <button            type="button"            class="inline-block rounded-s bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-primary-accent-300 focus:bg-primary-accent-300 focus:outline-none focus:ring-0 active:bg-primary-600 motion-reduce:transition-none"            data-twe-ripple-init            data-twe-ripple-color="light">            Left          </button>          <button            type="button"            class="inline-block bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-primary-accent-300 focus:bg-primary-accent-300 focus:outline-none focus:ring-0 active:bg-primary-600 motion-reduce:transition-none"            data-twe-ripple-init            data-twe-ripple-color="light">            Middle          </button>          <button            type="button"            class="inline-block rounded-e bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-primary-accent-300 focus:bg-primary-accent-300 focus:outline-none focus:ring-0 active:bg-primary-600 motion-reduce:transition-none"            data-twe-ripple-init            data-twe-ripple-color="light">            Right          </button>        </div>      </div>      <div class="mb-4 flex items-center justify-center">        <div class="inline-flex" role="group">          <button            type="button"            class="inline-block rounded-s bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-200 focus:bg-primary-accent-200 focus:outline-none focus:ring-0 active:bg-primary-accent-200 motion-reduce:transition-none dark:bg-primary-300 dark:hover:bg-primary-400 dark:focus:bg-primary-400 dark:active:bg-primary-400"            data-twe-ripple-init            data-twe-ripple-color="light">            Left          </button>          <button            type="button"            class="inline-block bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-200 focus:bg-primary-accent-200 focus:outline-none focus:ring-0 active:bg-primary-accent-200 motion-reduce:transition-none dark:bg-primary-300 dark:hover:bg-primary-400 dark:focus:bg-primary-400 dark:active:bg-primary-400"            data-twe-ripple-init            data-twe-ripple-color="light">            Middle          </button>          <button            type="button"            class="inline-block rounded-e bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-200 focus:bg-primary-accent-200 focus:outline-none focus:ring-0 active:bg-primary-accent-200 motion-reduce:transition-none dark:bg-primary-300 dark:hover:bg-primary-400 dark:focus:bg-primary-400 dark:active:bg-primary-400"            data-twe-ripple-init            data-twe-ripple-color="light">            Right          </button>        </div>      </div>      <div class="mb-4 flex items-center justify-center">        <div          class="inline-flex rounded-md shadow-success-3 transition duration-150 ease-in-out hover:bg-success-accent-300 hover:shadow-success-2 focus:bg-success-accent-300 focus:shadow-success-2 focus:outline-none focus:ring-0 active:bg-success-600 active:shadow-success-2 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"          role="group">          <button            type="button"            class="inline-block rounded-s bg-success px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-success-accent-300 focus:bg-success-accent-300 focus:outline-none focus:ring-0 active:bg-success-600 motion-reduce:transition-none"            data-twe-ripple-init            data-twe-ripple-color="light">            Left          </button>          <button            type="button"            class="inline-block bg-success px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-success-accent-300 focus:bg-success-accent-300 focus:outline-none focus:ring-0 active:bg-success-600 motion-reduce:transition-none"            data-twe-ripple-init            data-twe-ripple-color="light">            Middle          </button>          <button            type="button"            class="inline-block rounded-e bg-success px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-success-accent-300 focus:bg-success-accent-300 focus:outline-none focus:ring-0 active:bg-success-600 motion-reduce:transition-none"            data-twe-ripple-init            data-twe-ripple-color="light">            Right          </button>        </div>      </div>      <div class="mb-4 flex items-center justify-center">        <div          class="inline-flex rounded-md shadow-danger-3 transition duration-150 ease-in-out hover:bg-danger-accent-300 hover:shadow-danger-2 focus:bg-danger-accent-300 focus:shadow-danger-2 focus:outline-none focus:ring-0 active:bg-danger-600 active:shadow-danger-2 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"          role="group">          <button            type="button"            class="inline-block rounded-s bg-danger px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-danger-accent-300 focus:bg-danger-accent-300 focus:outline-none focus:ring-0 active:bg-danger-600 motion-reduce:transition-none"            data-twe-ripple-init            data-twe-ripple-color="light">            Left          </button>          <button            type="button"            class="inline-block bg-danger px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-danger-accent-300 focus:bg-danger-accent-300 focus:outline-none focus:ring-0 active:bg-danger-600 motion-reduce:transition-none"            data-twe-ripple-init            data-twe-ripple-color="light">            Middle          </button>          <button            type="button"            class="inline-block rounded-e bg-danger px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-danger-accent-300 focus:bg-danger-accent-300 focus:outline-none focus:ring-0 active:bg-danger-600 motion-reduce:transition-none"            data-twe-ripple-init            data-twe-ripple-color="light">            Right          </button>        </div>      </div>      <div class="mb-4 flex items-center justify-center">        <div          class="inline-flex rounded-md shadow-warning-3 transition duration-150 ease-in-out hover:bg-warning-accent-300 hover:shadow-warning-2 focus:bg-warning-accent-300 focus:shadow-warning-2 focus:outline-none focus:ring-0 active:bg-warning-600 active:shadow-warning-2 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"          role="group">          <button            type="button"            class="inline-block rounded-s bg-warning px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-warning-accent-300 focus:bg-warning-accent-300 focus:outline-none focus:ring-0 active:bg-warning-600 motion-reduce:transition-none"            data-twe-ripple-init            data-twe-ripple-color="light">            Left          </button>          <button            type="button"            class="inline-block bg-warning px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-warning-accent-300 focus:bg-warning-accent-300 focus:outline-none focus:ring-0 active:bg-warning-600 motion-reduce:transition-none"            data-twe-ripple-init            data-twe-ripple-color="light">            Middle          </button>          <button            type="button"            class="inline-block rounded-e bg-warning px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-warning-accent-300 focus:bg-warning-accent-300 focus:outline-none focus:ring-0 active:bg-warning-600 motion-reduce:transition-none"            data-twe-ripple-init            data-twe-ripple-color="light">            Right          </button>        </div>      </div>      <div class="mb-4 flex items-center justify-center">        <div          class="inline-flex rounded-md shadow-info-3 transition duration-150 ease-in-out hover:bg-info-accent-300 hover:shadow-info-2 focus:bg-info-accent-300 focus:shadow-info-2 focus:outline-none focus:ring-0 active:bg-info-600 active:shadow-info-2 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"          role="group">          <button            type="button"            class="inline-block rounded-s bg-info px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-info-accent-300 focus:bg-info-accent-300 focus:outline-none focus:ring-0 active:bg-info-600 motion-reduce:transition-none"            data-twe-ripple-init            data-twe-ripple-color="light">            Left          </button>          <button            type="button"            class="inline-block bg-info px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-info-accent-300 focus:bg-info-accent-300 focus:outline-none focus:ring-0 active:bg-info-600 motion-reduce:transition-none"            data-twe-ripple-init            data-twe-ripple-color="light">            Middle          </button>          <button            type="button"            class="inline-block rounded-e bg-info px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-info-accent-300 focus:bg-info-accent-300 focus:outline-none focus:ring-0 active:bg-info-600 motion-reduce:transition-none"            data-twe-ripple-init            data-twe-ripple-color="light">            Right          </button>        </div>      </div>      <div class="mb-4 flex items-center justify-center">        <div          class="inline-flex rounded-md shadow-light-3 transition duration-150 ease-in-out hover:bg-neutral-200 hover:shadow-light-2 focus:bg-neutral-200 focus:shadow-light-2 focus:outline-none focus:ring-0 active:bg-neutral-200 active:shadow-light-2 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"          role="group">          <button            type="button"            class="inline-block rounded-s bg-neutral-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-600 transition duration-150 ease-in-out hover:bg-neutral-200 focus:bg-neutral-200 focus:outline-none focus:ring-0 active:bg-neutral-200 motion-reduce:transition-none"            data-twe-ripple-init            data-twe-ripple-color="light">            Left          </button>          <button            type="button"            class="inline-block bg-neutral-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-600 transition duration-150 ease-in-out hover:bg-neutral-200 focus:bg-neutral-200 focus:outline-none focus:ring-0 active:bg-neutral-200 motion-reduce:transition-none"            data-twe-ripple-init            data-twe-ripple-color="light">            Middle          </button>          <button            type="button"            class="inline-block rounded-e bg-neutral-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-600 transition duration-150 ease-in-out hover:bg-neutral-200 focus:bg-neutral-200 focus:outline-none focus:ring-0 active:bg-neutral-200 motion-reduce:transition-none"            data-twe-ripple-init            data-twe-ripple-color="light">            Right          </button>        </div>      </div>      <div class="mb-4 flex items-center justify-center">        <div          class="inline-flex rounded-md shadow-dark-3 transition duration-150 ease-in-out hover:bg-neutral-700 hover:shadow-dark-2 focus:bg-neutral-700 focus:shadow-dark-2 focus:outline-none focus:ring-0 active:bg-neutral-900 active:shadow-dark-2 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"          role="group">          <button            type="button"            class="inline-block rounded-s bg-neutral-800 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-50 transition duration-150 ease-in-out hover:bg-neutral-700 focus:bg-neutral-700 focus:outline-none focus:ring-0 active:bg-neutral-900 motion-reduce:transition-none"            data-twe-ripple-init            data-twe-ripple-color="light">            Left          </button>          <button            type="button"            class="inline-block bg-neutral-800 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-50 transition duration-150 ease-in-out hover:bg-neutral-700 focus:bg-neutral-700 focus:outline-none focus:ring-0 active:bg-neutral-900 motion-reduce:transition-none"            data-twe-ripple-init            data-twe-ripple-color="light">            Middle          </button>          <button            type="button"            class="inline-block rounded-e bg-neutral-800 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-50 transition duration-150 ease-in-out hover:bg-neutral-700 focus:bg-neutral-700 focus:outline-none focus:ring-0 active:bg-neutral-900 motion-reduce:transition-none"            data-twe-ripple-init            data-twe-ripple-color="light">            Right          </button>        </div>      </div>
                  // Initialization for ES Users      import {        Ripple,        initTWE,      } from "tw-elements";            initTWE({ Ripple });

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):

[8]ページ先頭
©2009-2025 Movatter.jp