diff --git a/docs/components/buttons-menus/buttons.md b/docs/components/buttons-menus/buttons.md index 1629f9164..945e09d83 100644 --- a/docs/components/buttons-menus/buttons.md +++ b/docs/components/buttons-menus/buttons.md @@ -33,11 +33,11 @@ Buttons can be primary, secondary, or tertiary, regardless of their semantic mea ### Categories Buttons can have text or a combination of text and labels, or they can be purely icon-based. -When the button contains only an icon, it adopts a circular shape. +Icon buttons can be either square or circular, depending on their placement and the geometry of the surrounding container. -The circular variant also includes a ghost button style. +The icon variant also includes a ghost button style. Ghost buttons are subtle and blend into the interface, used for low-priority or optional actions. They signal availability without drawing attention, ideal for less critical or contextual options. @@ -78,10 +78,12 @@ where a regular button would be too bulky. | -------------------|--------------|---------------------------------------------------------| | Padding left/right | `$spacing-l` | | | Padding top/bottom | `$spacing-s` | | -| Spacing(margin) | `$spacing-l` | Spacing between buttons and other components/containers | +| Padding left/right | `$spacing-6` | | +| Padding top/bottom | `$spacing-2` | | +| Spacing(margin) | `$spacing-6` | Spacing between buttons and other components/containers | | Min-width | 100px | Minimum width of button irrespective of text length | -#### Circle buttons +#### Icon buttons - **Large**