Replies: 1 comment
-
Looking good, also allow it to be applied to the Toggle groups. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Button component improvements proposal
Draft of the component variants and props as CSS classes:
https://codepen.io/AlexBueno/pen/wvrZxER
Change prop
size
Change current prop
size
since the only effective change is the width control.Proposal for 3 sizes:
Fig. 1 - Proposed button sizes:
large
,default
andcompact
.Large: cover the 44x44px target size recommended by the WCAG for pointer inputs.
Default: Regular size for multipurpose uses (Current size)
Compact: Use the button component:
The main changes are applied to the height and padding:
height: 48px
,padding: 0 1.25rem
height: 40px
,padding: 0 1rem
height: 32px
,padding: 0 0.5rem
Add prop
fillParent
(currentfillParent
behavior inside thesize
prop)Fig. 2 - Inline and block button behaviors
The current property is mixing width fixed values with two properties that are intimately related to the type of display the component has, I propose replacing the current
small
,medium
andlarge
width values, ending with a prop that allows the user switch between an inline behavior and a blocking behavior.inline-flex
fillParent
can be aboolean
attribute that when set totrue
displays the component as ablock
(instead of changing the display, adding width of 100%)References
block
propshouldFitContainer
propAdd prop
danger
Fig. 3 - Danger button variants
Apart from the variants the component already has, a contextual
danger
style can be applied to each of them, meant to be used in destructive actions (e.g. delete or remove items)danger
can be aboolean
type prop withfalse
as the defaultBeta Was this translation helpful? Give feedback.
All reactions