## Implementation Context - **Primary**: Use **SenangStart CSS** for the implementation. - **Reference**: Tailwind CSS is provided for stylistic context only. ## SenangStart CSS Usage To use SenangStart CSS, simply include the script in your HTML ``: ```html My App

Hello SenangStart!

Zero config, instant styling.

``` **Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html) # Button Group Category: actions Description: Grouped buttons ## Small Variant ### SenangStart CSS Code ```html <div layout="inline-flex overflow:hidden" visual="rounded:medium shadow:small border-w:regular border:gray-200 divide-x-w:regular divide:gray-200" role="group"> <button type="button" layout="focus:z:top" space="p-x:medium p-y:small" visual="text-size:small font:tw-medium text:gray-900 bg:white hover:bg:gray-100 hover:text:blue-700 focus:ring:regular focus:ring-color:blue-700 focus:text:blue-700">Left</button> <button type="button" layout="focus:z:top" space="p-x:medium p-y:small" visual="text-size:small font:tw-medium text:gray-900 bg:white hover:bg:gray-100 hover:text:blue-700 focus:ring:regular focus:ring-color:blue-700 focus:text:blue-700">Middle</button> <button type="button" layout="focus:z:top" space="p-x:medium p-y:small" visual="text-size:small font:tw-medium text:gray-900 bg:white hover:bg:gray-100 hover:text:blue-700 focus:ring:regular focus:ring-color:blue-700 focus:text:blue-700">Right</button> </div> ``` ### Tailwind CSS Code ```html <div class="inline-flex rounded-lg shadow-sm border-2 border-gray-200 divide-x-2 divide-gray-200 overflow-hidden" role="group"> <button type="button" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700">Left</button> <button type="button" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700">Middle</button> <button type="button" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700">Right</button> </div> ``` ## Medium Variant ### SenangStart CSS Code ```html <div layout="inline-flex overflow:hidden" visual="rounded:medium shadow:small border-w:regular border:gray-200 divide-x-w:regular divide:gray-200" role="group"> <button type="button" layout="focus:z:top" space="p-x:medium-2x p-y:small-2x" visual="text-size:base font:tw-medium text:gray-900 bg:white hover:bg:gray-100 hover:text:blue-700 focus:ring:regular focus:ring-color:blue-700 focus:text:blue-700">Left</button> <button type="button" layout="focus:z:top" space="p-x:medium-2x p-y:small-2x" visual="text-size:base font:tw-medium text:gray-900 bg:white hover:bg:gray-100 hover:text:blue-700 focus:ring:regular focus:ring-color:blue-700 focus:text:blue-700">Middle</button> <button type="button" layout="focus:z:top" space="p-x:medium-2x p-y:small-2x" visual="text-size:base font:tw-medium text:gray-900 bg:white hover:bg:gray-100 hover:text:blue-700 focus:ring:regular focus:ring-color:blue-700 focus:text:blue-700">Right</button> </div> ``` ### Tailwind CSS Code ```html <div class="inline-flex rounded-lg shadow-sm border-2 border-gray-200 divide-x-2 divide-gray-200 overflow-hidden" role="group"> <button type="button" class="px-5 py-2.5 text-base font-medium text-gray-900 bg-white hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700">Left</button> <button type="button" class="px-5 py-2.5 text-base font-medium text-gray-900 bg-white hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700">Middle</button> <button type="button" class="px-5 py-2.5 text-base font-medium text-gray-900 bg-white hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700">Right</button> </div> ``` ## Large Variant ### SenangStart CSS Code ```html <div layout="inline-flex overflow:hidden" visual="rounded:medium shadow:small border-w:regular border:gray-200 divide-x-w:regular divide:gray-200" role="group"> <button type="button" layout="focus:z:top" space="p-x:medium-3x p-y:small-3x" visual="text-size:large font:tw-medium text:gray-900 bg:white hover:bg:gray-100 hover:text:blue-700 focus:ring:regular focus:ring-color:blue-700 focus:text:blue-700">Left</button> <button type="button" layout="focus:z:top" space="p-x:medium-3x p-y:small-3x" visual="text-size:large font:tw-medium text:gray-900 bg:white hover:bg:gray-100 hover:text:blue-700 focus:ring:regular focus:ring-color:blue-700 focus:text:blue-700">Middle</button> <button type="button" layout="focus:z:top" space="p-x:medium-3x p-y:small-3x" visual="text-size:large font:tw-medium text:gray-900 bg:white hover:bg:gray-100 hover:text:blue-700 focus:ring:regular focus:ring-color:blue-700 focus:text:blue-700">Right</button> </div> ``` ### Tailwind CSS Code ```html <div class="inline-flex rounded-lg shadow-sm border-2 border-gray-200 divide-x-2 divide-gray-200 overflow-hidden" role="group"> <button type="button" class="px-6 py-3 text-lg font-medium text-gray-900 bg-white hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700">Left</button> <button type="button" class="px-6 py-3 text-lg font-medium text-gray-900 bg-white hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700">Middle</button> <button type="button" class="px-6 py-3 text-lg font-medium text-gray-900 bg-white hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700">Right</button> </div> ```