Button
01
Types
Choose the level of emphasis that matches the action.
02
States
Select a button type to review every supported interaction state.
03
Try it before you use it
Change the controls, inspect every state, then copy production-ready React code.
PreviewDesktopTabletMobile
04
Dimensions and anatomy
Use these measurements to reproduce ShivGyan buttons consistently in design and code.
Label width + 36px
40px
18Continue18
12348px radius
- 1Container
Secondary white surface with a 1px #D4D4D8 border.
- 2Label
Centered, sentence case, and written with a clear action verb.
- 3Horizontal padding
Padding changes by size while the label remains vertically centered.
- 4Shape and focus
8px radius; keyboard focus uses a 3px visible ring with 3px offset.
Size scale
Three supported sizes
The control height, label size, and horizontal padding scale together.
32px- Height
- 32px
- Horizontal padding
- 13px
- Label size
- 11px
40px- Height
- 40px
- Horizontal padding
- 18px
- Label size
- 13px
48px- Height
- 48px
- Horizontal padding
- 22px
- Label size
- 14px
Tokens
Shared construction values
These values remain consistent across primary, secondary, tertiary, and destructive buttons.
PropertyValuePurpose
Corner radius
8pxConsistent control shapeContent gap
8pxSpace between icon, spinner, and labelBorder
1pxDefines primary and outlined containersLabel weight
650Maintains legibility at compact sizesInteraction
160msHover background, lift, and shadow transitionIcon button
40 × 40pxCompact square action footprint