canonical / canonical/vanilla-framework

Make buttons with only icons square: Button

Open
#5,662 2 comments 0 reactions 0 assignees View on GitHub
Priority: High Tier: Global WG: Validated
Dominant language
HTML
Stars
983
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

## Component/pattern to amend

When using a button that only has an icon inside of it, we should be able to have the same types of button that we have regularly, but with only icons inside of it, and it should be shaped as a square. Currently the button looks like a vertical rectangle when there is only an icon inside.

Image

It would maybe also make sense to get rid of the small version, which is 27px vs the dense one which is 28px.

## Context

These buttons are often used as actions on pages, tables, or anywhere where there is no space for a full button. They always require a tooltip, as meaning can't be conveyed only through icons.

Contributor guide

Open the contributing guide

Research direction

Locate the Button component or pattern and its existing size variants, then compare how icon-only buttons are styled against regular buttons. Confirm the intended square dimensions, including whether the 27px small variant remains, and verify that the requested button types consistently produce square icon-only buttons.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html, sass
Domain
design, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.