Btns Component
Button group with shapes, sizes, widths, directions, flush mount, and grid layout.
Notes
Use class .btns as a container. Child elements are automatically styled as button group items.
Mark the active item with data-selected="true". Use [disabled] for disabled items.
Combining .btns-flush with direction classes (.btns-top, .btns-start, .btns-end) enables seamless edge fitting.
Basic usage
Disabled item
Edit
Delete
Export
With icons
⭐ Favorite
Files
Shapes
Default
Default
Option
Option
Rounded (.btns-rounded)
Rounded
Option
Option
Circle (.btns-pill)
Circle
Option
Option
Square (.btns-square)
Square
Option
Option
Fluid (.btns-fluid)
Fluid
Option
Option
Shape comparison
Def Opt Rnd Opt Cir Opt Sqr Opt Flu Opt
Width
Grid (.btns-full) — equal width
Home
Products
Services
Scale (.btns-scale) — fixed width
Home
Products
Services
Scale multiplier (.btns-scale-2) — 2x width
Home
Products
Services
Scale custom (.btns-scale-[3]) — 3x width
Home
Products
Services
Button ratio (.btn-ratio) — 1:1 square
H
P
S
Custom button ratio (.btn-ratio-*) — N:1
Home
Products
Services
Direction
Bottom (default)
A
B
C
Top (.btns-top)
A
B
C
Start (.btns-start) — vertical, left-to-right
Top
Middle
Bottom
End (.btns-end) — vertical, right-to-left
Top
Middle
Bottom
Flush mount
Bottom flush (.btns-flush)
Left
Center
Right
Top flush (.btns-top.btns-flush)
Left
Center
Right
Start flush (.btns-start.btns-flush) — vertical left
End flush (.btns-end.btns-flush) — vertical right
Sizes (btns-4 ~ btns-15)
Extra small: 4 ~ 7
4 Opt Opt 5 Opt Opt 6 Opt Opt 7 Opt Opt
Small: 8 ~ 9
8 Opt Opt 9 Opt Opt
Medium: 10 ~ 11
10 Opt Opt 11 Opt Opt
Large: 12 ~ 13
12 Opt Opt 13 Opt Opt
Extra large: 14 ~ 15
14 Opt Opt 15 Opt Opt
All sizes (4 ~ 15)
4 Opt 5 Opt 6 Opt 7 Opt 8 Opt 9 Opt 10 Opt 11 Opt 12 Opt 13 Opt 14 Opt 15 Opt
Use cases
Segmented control
Day
Week
Month
Year
View switcher
📱 List
📊 Grid
📋 Detail
Equal-width nav
Home
Products
Services
About
Vertical nav
🏠 Home
📦 Products
📞 Contact
Flush tab bar
Recommended
Trending
Latest
Size + shape combo
S M L S M L S M L
Note: Child buttons within .btns support all btn-* utilities (variants, colors, shapes, sizes, widths such as btn-ratio, btn-ratio-*, etc.). See the Button demo for details.