Skip to content

feat(buttons): add square btn-icon #1215

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
spike-rabbit merged 1 commit into from
Jan 20, 2026
Merged

feat(buttons): add square btn-icon #1215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ...ide-panel--si-side-panel--scroll-mode-element-examples-chromium-light-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions ...tic.spec.ts-snapshots/buttons--buttons-element-examples-chromium-dark-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions ...ic.spec.ts-snapshots/buttons--buttons-element-examples-chromium-light-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
59 changes: 40 additions & 19 deletions playwright/snapshots/static.spec.ts-snapshots/buttons--buttons.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,44 +4,65 @@
- button "Secondary"
- button "Warning"
- button "Danger"
- button "Input"
- button "Tertiary"
- button "Warning"
- button "Danger"
- heading "Buttons with icons" [level=4]
- button "Default"
- button "Warning"
- button "Danger"
- button "Secondary"
- button /\d+\.\d+\.\d+ - \d+\.\d+\.\d+/
- button "Tertiary"
- heading "Input buttons" [level=4]
- button "Input"
- button /\d+\.\d+\.\d+ - \d+\.\d+\.\d+/
- heading "Icon buttons" [level=4]
- button "clock"
- button "bath"
- button "library"
- button "badge"
- button "badge"
- button "badge"
- button "badge"
- button "badge"
- button "badge"
- button "secondary badge"
- button "secondary warning badge"
- button "secondary danger badge"
- button "tertiary badge"
- button "tertiary warning badge"
- button "tertiary danger badge"
- button "delete"
- button "close"
- button "close"
- heading "Circle buttons" [level=4]
- button "clock"
- button "bath"
- button "library"
- button "badge"
- button "badge"
- button "secondary badge"
- button "secondary warning badge"
- button "secondary danger badge"
- button "tertiary badge"
- button "tertiary warning badge"
- button "tertiary danger badge"
- button "delete"
- button "btn-sm"
- button "default"
- button "btn-lg"
- link "Go back":
- button "close"
- button "close"
- heading "Button sizing" [level=4]
- button "Large"
- button "Default"
- button "Small"
- heading "Icon button sizing" [level=4]
- button "default icon button"
- button "default circle button"
- button "small icon button"
- button "small circle button"
- button "extra small icon button"
- button "extra small circle button"
- heading "Button links" [level=4]
- link "Primary Link":
- /url: "#"
- link "Go back":
- link "Warning Link":
- /url: "#"
- link "Go back":
- link "Danger Link":
- /url: "#"
- link "Go back":
- link "Secondary Link":
- /url: "#"
- link "Go back":
- link "Tertiary Link":
- /url: "#"
- checkbox "Disable all buttons"
- switch "Disable all buttons"
- text: Disable all buttons
5 changes: 5 additions & 0 deletions projects/element-theme/src/styles/bootstrap/_button-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,11 @@
margin-inline-start: -1px;
}

.btn-icon {
inline-size: unset;
padding-inline: calc(#{map.get(spacers.$spacers, 2)} - var(--btn-border-width, 0px));
}

// Dropdown toggle styling for split buttons
.btn.dropdown-toggle {
inline-size: 24px;
Expand Down
36 changes: 23 additions & 13 deletions projects/element-theme/src/styles/bootstrap/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,14 +64,6 @@ button {
margin-block: -#{map.get(spacers.$spacers, 2)};
margin-inline: -#{map.get(spacers.$spacers, 2)} #{map.get(spacers.$spacers, 2)};
}

&.btn-icon {
padding-inline: calc(#{map.get(spacers.$spacers, 2)} - var(--btn-border-width, 0px));

.icon {
margin-inline: 0;
}
}
}

.btn:not(:is(.btn-circle, .btn-link, .btn-close, .btn-icon)) {
Expand Down Expand Up @@ -156,15 +148,28 @@ button {
}
}

// Circle Buttons
// Icon buttons with circle variant
// --------------
:is(.btn-circle, .btn-close) {
padding: 0 !important; // stylelint-disable-line declaration-no-important
border-radius: 50%;
.btn:is(.btn-circle, .btn-icon, .btn-close) {
display: inline-flex;
padding: 0;
flex-shrink: 0;

.icon {
margin-inline: 0;
}
}

.btn-icon {
border-radius: semantic-tokens.$element-button-radius;
}

.btn-circle {
border-radius: 50%;
}

.btn-circle,
.btn-icon {
&,
&.btn-lg {
@include button-circle-size($btn-circle-size-default, $btn-circle-font-size-default);
Expand All @@ -185,13 +190,19 @@ button {
}

.btn-circle.btn-ghost,
.btn-icon.btn-ghost,
.btn-close {
--btn-bg: transparent;
--btn-bg-hover: #{semantic-tokens.$element-action-secondary-hover};
--btn-color: #{semantic-tokens.$element-ui-2};
--btn-color-hover: #{semantic-tokens.$element-ui-1};
}

.btn-close.btn-tertiary {
--btn-color: #{semantic-tokens.$element-action-secondary-text};
--btn-color-hover: #{semantic-tokens.$element-action-secondary-text-hover};
}

.btn-lg {
font-size: bootstrap-variables.$btn-font-size-lg;
line-height: 1.5;
Expand All @@ -211,7 +222,6 @@ button {
&::before {
content: '\002715';
font-size: 1rem;
margin-block-start: 2px;
}

> * {
Expand Down
18 changes: 9 additions & 9 deletions src/app/examples/buttons/button-groups.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,37 +42,37 @@

<div class="d-flex flex-wrap align-items-center gap-3 mb-6" aria-label="Icon button groups">
<div class="btn-group" role="group" aria-label="Primary group">
<button type="button" class="btn btn-icon btn-primary" aria-label="Edit">
<button type="button" class="btn btn-icon btn-sm btn-primary" aria-label="Edit">
<i class="icon element-edit"></i>
</button>
<button type="button" class="btn btn-icon btn-primary" aria-label="Copy">
<button type="button" class="btn btn-icon btn-sm btn-primary" aria-label="Copy">
<i class="icon element-copy"></i>
</button>
<button type="button" class="btn btn-icon btn-primary" aria-label="Delete">
<button type="button" class="btn btn-icon btn-sm btn-primary" aria-label="Delete">
<i class="icon element-delete"></i>
</button>
</div>

<div class="btn-group" role="group" aria-label="Secondary group">
<button type="button" class="btn btn-icon btn-secondary" aria-label="Edit">
<button type="button" class="btn btn-icon btn-sm btn-secondary" aria-label="Edit">
<i class="icon element-edit"></i>
</button>
<button type="button" class="btn btn-icon btn-secondary" aria-label="Copy">
<button type="button" class="btn btn-icon btn-sm btn-secondary" aria-label="Copy">
<i class="icon element-copy"></i>
</button>
<button type="button" class="btn btn-icon btn-secondary" aria-label="Delete">
<button type="button" class="btn btn-icon btn-sm btn-secondary" aria-label="Delete">
<i class="icon element-delete"></i>
</button>
</div>

<div class="btn-group" role="group" aria-label="Tertiary group">
<button type="button" class="btn btn-icon btn-tertiary" aria-label="Edit">
<button type="button" class="btn btn-icon btn-sm btn-tertiary" aria-label="Edit">
<i class="icon element-edit"></i>
</button>
<button type="button" class="btn btn-icon btn-tertiary" aria-label="Copy">
<button type="button" class="btn btn-icon btn-sm btn-tertiary" aria-label="Copy">
<i class="icon element-copy"></i>
</button>
<button type="button" class="btn btn-icon btn-tertiary" aria-label="Delete">
<button type="button" class="btn btn-icon btn-sm btn-tertiary" aria-label="Delete">
<i class="icon element-delete"></i>
</button>
</div>
Expand Down
Loading
Loading