SheepstarStudio/Dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added the large button size to the Button.jsx component

Browse Source
This commit is contained in:
Mathias Wagner 2023-11-13 13:09:13 +01:00
parent 455915d811
commit 0df3a05228
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44
2 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/common/components/Button/Button.jsx
View File

@ -1,8 +1,8 @@
import "./styles.sass"; import "./styles.sass";
export const Button = ({children, onClick}) => { export const Button = ({children, onClick, size = "normal"}) => {
return ( return (
<button className="btn" onClick={onClick}> <button className={"btn btn-size-" + size} onClick={onClick}>
{children} {children}
</button> </button>
); );

13
src/common/components/Button/styles.sass
View File

@ -4,13 +4,20 @@
background-color: $primary background-color: $primary
border: none border: none
color: $text color: $text
padding: 0.5rem 1rem
border-radius: 0.6rem
font-size: 14pt
font-weight: 600 font-weight: 600
transition: all 0.2s transition: all 0.2s
cursor: pointer cursor: pointer
.btn-size-normal
padding: 0.5rem 1rem
border-radius: 0.6rem
font-size: 14pt
.btn-size-large
padding: 1rem 3rem
border-radius: 1rem
font-size: 18pt
.btn:hover .btn:hover
filter: brightness(0.9) filter: brightness(0.9)