Default (icon mode, hover, left aligned)

Right aligned, click interaction, first item as default

Click interaction, middle item as default

Right aligned, last item as default

Left aligned, second item as default

Right aligned, click interaction, fourth item as default

Both mode (icon + label visible on trigger)

Copy Code

Both mode with click interaction

Copy Code

Click interaction

Spacious spacing (padding: 8px, gap: 6px)

Tight spacing (padding: 2px, gap: 2px)

Spacious spacing, right aligned

Both mode, click interaction

Copy Code

Both mode, click, right aligned

Copy Code

Fixed width (200px), right aligned