diff --git a/src/components/button/__snapshots__/button.test.js.snap b/src/components/button/__snapshots__/button.test.js.snap index f95b9431..6bf31c00 100644 --- a/src/components/button/__snapshots__/button.test.js.snap +++ b/src/components/button/__snapshots__/button.test.js.snap @@ -223,7 +223,7 @@ exports[`Button states renders only icon 1`] = ` word-break: keep-all; cursor: pointer; pointer-events: auto; - padding: 4px 12px; + padding: 4px 6px; transition: all 150ms; background-color: rgba(255,255,255,0.0); color: #00AB44; @@ -307,7 +307,7 @@ exports[`Button states renders only icon 1`] = ` class="c0" colors="[object Object]" flavour="hollow" - padding="1,3" + padding="1,1.5" round="0.5" texttransform="firstLetter" > @@ -342,7 +342,7 @@ exports[`Button states renders smaller only icon 1`] = ` word-break: keep-all; cursor: pointer; pointer-events: auto; - padding: 4px 12px; + padding: 4px 6px; transition: all 150ms; background-color: rgba(255,255,255,0.0); color: #00AB44; @@ -426,7 +426,7 @@ exports[`Button states renders smaller only icon 1`] = ` class="c0" colors="[object Object]" flavour="hollow" - padding="1,3" + padding="1,1.5" round="0.5" texttransform="firstLetter" > diff --git a/src/components/button/button.js b/src/components/button/button.js index 9596d36e..d650c047 100644 --- a/src/components/button/button.js +++ b/src/components/button/button.js @@ -24,6 +24,7 @@ export const Button = ({ flavour={flavour} textTransform={textTransform} hasIcon={!!icon || isLoading} + hasLabel={!!children} onClick={isLoading ? undefined : onClick} ref={ref} iconColor={iconColor} diff --git a/src/components/button/styled.js b/src/components/button/styled.js index cdc0efd1..7395bd24 100644 --- a/src/components/button/styled.js +++ b/src/components/button/styled.js @@ -123,7 +123,13 @@ const colorsByFlavour = ({ flavour = DEFAULT, danger, warning, iconColor }) => { export const StyledButton = styled.button.attrs( ({ groupFirst, groupLast, groupMiddle, ...props }) => ({ - padding: props.large ? [1.5, 4] : [1, 3], + padding: props.large + ? !props.hasLabel + ? [1.5, 3] + : [1.5, 4] + : !props.hasLabel + ? [1, 1.5] + : [1, 3], colors: colorsByFlavour(props), round: groupFirst ? { side: "left", size: 0.5 }