Browse Source

Set sizing of button

Use 100% for `<button>` element because it is auto-size by default.
tags/0.3.0
TheoryOfNekomata 4 years ago
parent
commit
bad7f4106f
1 changed files with 8 additions and 3 deletions
  1. +8
    -3
      lib/components/Button/Button.tsx

+ 8
- 3
lib/components/Button/Button.tsx View File

@@ -55,7 +55,10 @@ const disabledLinkButtonStyles: CSSObject = {
...disabledButtonStyles,
}

const Base = styled('button')(buttonStyles)
const Base = styled('button')({
...buttonStyles,
width: '100%',
})

Base.displayName = 'button'

@@ -170,6 +173,7 @@ const Button = React.forwardRef<HTMLAnchorElement | HTMLButtonElement | HTMLSpan
rel,
type = 'button',
border = false,
...etcProps
},
ref,
) => {
@@ -193,20 +197,21 @@ const Button = React.forwardRef<HTMLAnchorElement | HTMLButtonElement | HTMLSpan
switch (element) {
case 'button':
return (
<Base type={type!} ref={ref as React.Ref<HTMLButtonElement>} disabled={disabled!} style={commonButtonStyles}>
<Base {...etcProps} type={type!} ref={ref as React.Ref<HTMLButtonElement>} disabled={disabled!} style={commonButtonStyles}>
{buttonContent}
</Base>
)
case 'a':
if (disabled) {
return (
<DisabledLinkBase ref={ref as React.Ref<HTMLSpanElement>} style={commonButtonStyles}>
<DisabledLinkBase {...etcProps} ref={ref as React.Ref<HTMLSpanElement>} style={commonButtonStyles}>
{buttonContent}
</DisabledLinkBase>
)
}
return (
<LinkBase
{...etcProps}
href={href!}
target={target!}
rel={rel!}


Loading…
Cancel
Save