Button: Small buttons are not sized correctly

[coliff]

See screenshot (from https://modus-web-components.trimble.com/?path=/docs/components-content-tree--multi-selection) showing active state here:

We should specify height and width of the button, or set consistent vertical/horizontal padding to fix this issue.

[cjwinsor]

The actionbar is just a collection of modus buttons so the issue should be addressed on small buttons. Ensure size and focus borders are correct after fix.

[coliff]

@ElishaSamPeterPrabhu Maybe the modus-button should have icon-only on it e.g. icon-only="add" ?

[ElishaSamPeterPrabhu]

@ElishaSamPeterPrabhu Maybe the modus-button should have icon-only on it e.g. icon-only="add" ?

Yes we can do that but the icon map doesn't contain for the other icons

So where should we update them?

[coliff]

...or instead use some custom CSS like:

height: 28px; width: 28px; padding: 8px; margin-left: 8px

[ElishaSamPeterPrabhu]

height: 28px; width: 28px; padding: 8px; margin-left: 8px

after applying the css

Is this the expected look?

[coliff]

Is this the expected look?

not exactly, I just included that CSS as a starting point which improves things somewhat.

[ElishaSamPeterPrabhu]

Is this the expected look?

not exactly, I just included that CSS as a starting point which improves things somewhat.

@coliff
There are two points to address

1. Content Tree - Custom Action Bar is invisible in dark theme #1466 has a similar need to decide between modus button with icon-only property or the custom css with svg.
2. Is there a reference on how the custom bar should look as its not available in figma?