tyler.durden/dashy
1
0
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2025-07-26 23:24:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

📦 Creates reusable Button component

Browse Source
This commit is contained in:
Alicia Sykes 2021-06-28 21:25:26 +01:00
parent ba824b1f9a
commit eee99d1ffe
2 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Button.js
View File

@ -5,7 +5,7 @@ import './../styles/Button.scss';
export default function Button({ children, to, color }) { export default function Button({ children, to, color }) {
return ( return (
<Link to={to}> <Link to={to} className="button-link-wrapper">
<button className={clsx('button', color && 'color-btn', `btn-${color}`)}> <button className={clsx('button', color && 'color-btn', `btn-${color}`)}>
{children} {children}
</button> </button>

10
src/styles/Button.scss
View File

@ -1,4 +1,8 @@
.button-link-wrapper:hover {
text-decoration: none;
}
.button { .button {
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
@ -13,6 +17,12 @@
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
margin: 0.5rem; margin: 0.5rem;
color: var(--black); color: var(--black);
display: flex;
svg {
width: 1.8rem;
margin-right: 0.5rem;
}
&.color-btn:hover { &.color-btn:hover {
color: #000000b3; color: #000000b3;