diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx index 09a5ca31eb5144f19c81116ef1cc787a46b3623f..d20878a36b892df043ca4758b2816dca268edf1a 100644 --- a/examples/web/react/app.tsx +++ b/examples/web/react/app.tsx @@ -28,6 +28,12 @@ export const App = () => { return ( <> <Button text={getText()} onClick={onClick} /> + <Button + text={getText()} + image={require("../res/pause.svg")} + imageAlt="tobias" + onClick={onClick} + /> <Info pairs={pairs()} /> </> ); diff --git a/examples/web/react/components/button/button.css b/examples/web/react/components/button/button.css index ca261c4ba4b8536d007e9d19f970baf6b6eb8313..3eabd76481444820d172ce3d23e54bcac143f9ae 100644 --- a/examples/web/react/components/button/button.css +++ b/examples/web/react/components/button/button.css @@ -66,8 +66,7 @@ .button.simple > img { margin-right: 6px; - margin-top: 2px; - vertical-align: top; + vertical-align: middle; width: 13px; } @@ -83,6 +82,11 @@ width: 38px; } +.button.simple > span { + vertical-align: middle; + display: inline-block; +} + .button.simple.no-text > img { margin-right: 0px; margin-top: 0px; diff --git a/examples/web/react/components/button/button.tsx b/examples/web/react/components/button/button.tsx index b4b57329764a88d025779efef12b0c9965bf8d68..7858e7ee1cb1a8d6a50c89201d6921cb7f38b947 100644 --- a/examples/web/react/components/button/button.tsx +++ b/examples/web/react/components/button/button.tsx @@ -4,6 +4,8 @@ import "./button.css"; type ButtonProps = { text: string; + image?: string; + imageAlt?: string; size?: string; style?: string[]; onClick?: () => void; @@ -11,17 +13,26 @@ type ButtonProps = { export const Button: FC<ButtonProps> = ({ text, + image, + imageAlt, size = "small", style = ["simple", "border"], onClick }) => { const classes = () => ["button", size, ...style].join(" "); const _onClick = () => (onClick ? onClick() : undefined); - return ( + const buttonSimple = () => ( <span className={classes()} onClick={_onClick}> {text} </span> ); + const buttonImage = () => ( + <span className={classes()} onClick={_onClick}> + <img src={image} alt={imageAlt} /> + <span>{text}</span> + </span> + ); + return image ? buttonImage() : buttonSimple(); }; export default Button;