Pad internal button elements to correctly space out icons, etc.

This commit is contained in:
Andrew Nicolaou 2020-04-26 11:31:45 +02:00
parent e1340518a5
commit 428fee266b
2 changed files with 16 additions and 1 deletions

View file

@ -35,6 +35,10 @@ const StyledButton = styled.button`
background-color: ${prop('buttonDisabledColorBackground')};
cursor: not-allowed;
}
> *:not(:last-child) {
margin-right: ${remSize(8)};
}
}
`;
@ -58,6 +62,7 @@ const Button = ({
Button.defaultProps = {
disabled: false,
href: null,
label: null,
to: null,
type: 'button',
};
@ -79,7 +84,7 @@ Button.propTypes = {
/*
* An ARIA Label used for accessibility
*/
label: PropTypes.string.isRequired,
label: PropTypes.string,
/**
* Specifying a to URL will use a react-router Link
*/

View file

@ -34,3 +34,13 @@ export const AnchorButton = () => (
export const ReactRouterLink = () => (
<Button to="./somewhere" label="submit">Actually a Link</Button>
);
export const InternalElementMargin = () => (
<Button>
<span>Internal</span>
<span>elements</span>
<span>have</span>
<span>right</span>
<span>margins</span>
</Button>
);