a.link
Text Link
Button
import :
import "@/assets/scss/components/button.scss";
Button Size SM
Width : 120px, Height : 40, Size : 14px,semibold
.btn.btn-sm
Button Size default
Width : 160px, Height : 50px, Size : 16px,semibold
.btn
Button Size LG
Width : 180px, Height : 60px, Size : 18px,semibold
.btn.btn-lg
Button Primary
.btn.btn-primary
Button Primary : Hover
.btn.btn-primary.active
Button Primary [Disabled]
.btn.btn-primary[disabled]
Button Primary Outline
.btn.btn-primary.outline
Button Primary Outline : Hover
.btn.btn-primary.outline.active
Button Primary Outline [Disabled]
.btn.btn-primary.outline[disabled]
Button Secondary
.btn.btn-secondary
Button Secondary : Hover
.btn.btn-secondary.active
Button Secondary [Disabled]
.btn.btn-secondary[disabled]
Button Secondary Outline
.btn.btn-secondary.outline
Button Secondary Outline : Hover
.btn.btn-secondary.outline.active
Button Secondary Outline [Disabled]
.btn.btn-secondary.outline[disabled]
Button Error
.btn.btn-error
Button Error : Hover
.btn.btn-error.active
Button Error [Disabled]
.btn.btn-error[disabled]
Button Error Outline
.btn.btn-error.outline
Button Error Outline : Hover
.btn.btn-error.outline.active
Button Error Outline [Disabled]
.btn.btn-error.outline[disabled]
Button Warning
.btn.btn-warning
Button Warning : Hover
.btn.btn-warning.active
Button Warning [Disabled]
.btn.btn-warning[disabled]
Button Warning Outline
.btn.btn-warning.outline
Button Warning Outline : Hover
.btn.btn-warning.outline.active
Button Warning Outline [Disabled]
.btn.btn-warning.outline[disabled]
Button Success
.btn.btn-success
Button Success : Hover
.btn.btn-success.active
Button Success [Disabled]
.btn.btn-success[disabled]
Button Success Outline
.btn.btn-success.outline
Button Success Outline : Hover
.btn.btn-success.outline.active
Button Success Outline [Disabled]
.btn.btn-success.outline[disabled]
Button Info
.btn.btn-info
Button Info : Hover
.btn.btn-info.active
Button Info [Disabled]
.btn.btn-info[disabled]
Button Info Outline
.btn.btn-info.outline
Button Info Outline : Hover
.btn.btn-info.outline.active
Button Info Outline [Disabled]
.btn.btn-info.outline[disabled]
Mui Component
import :
import Button from '@mui/material/Button';
config.layout.tsx : setting style
const theme = createTheme ({ palette :themePalette, components : { MuiButton : { styleOverrides : { root : { fontFamily :'var(--family-default)' , fontSize :'var(--typo-default)' , fontWeight :'var(--fw-semibold)' , borderRadius :'var(--btn-radius)' , transition :'var(--transition)' , minWidth :'var(--btn-width-default)' , height :'var(--btn-height-default)' , border :'1px solid var(--color-default)' , color :'var(--color-default)' , padding :'0 10px' , textTransform :'none' , letterSpacing :'normal' , boxShadow :'none' , lineHeight :'1.2em' , backgroundColor :'transparent' , '&:hover' : { backgroundColor :'var(--color-dark)' , borderColor :'var(--color-dark)' , color :'var(--color-light)' , boxShadow :'none' , }, }, // text link textPrimary : { border :'none' , padding :'0' , minWidth :'inherit !important' , height :'inherit !important' , borderRadius :'0' , opacity :'1' , color :'var(--color-primary)' , '&:hover' : { backgroundColor :'transparent' , textDecoration :'underline' , color :'var(--color-primary)' , }, }, textSecondary : { border :'none' , padding :'0' , minWidth :'inherit !important' , height :'inherit !important' , borderRadius :'0' , opacity :'1' , color :'var(--color-secondary)' , '&:hover' : { backgroundColor :'transparent' , textDecoration :'underline' , color :'var(--color-secondary)' , }, }, textError : { border :'none' , padding :'0' , minWidth :'inherit !important' , height :'inherit !important' , borderRadius :'0' , opacity :'1' , color :'var(--color-error)' , '&:hover' : { backgroundColor :'transparent' , textDecoration :'underline' , color :'var(--color-error)' , }, }, textWarning : { border :'none' , padding :'0' , minWidth :'inherit !important' , height :'inherit !important' , borderRadius :'0' , opacity :'1' , color :'var(--color-warning)' , '&:hover' : { backgroundColor :'transparent' , textDecoration :'underline' , color :'var(--color-warning)' , }, }, textSuccess : { border :'none' , padding :'0' , minWidth :'inherit !important' , height :'inherit !important' , borderRadius :'0' , opacity :'1' , color :'var(--color-success)' , '&:hover' : { backgroundColor :'transparent' , textDecoration :'underline' , color :'var(--color-success)' , }, }, textInfo : { border :'none' , padding :'0' , minWidth :'inherit !important' , height :'inherit !important' , borderRadius :'0' , opacity :'1' , color :'var(--color-dark)' , '&:hover' : { backgroundColor :'transparent' , textDecoration :'underline' , color :'var(--color-black)' , }, }, // btn size sizeSmall : { minWidth :'var(--btn-width-sm)' , height :'var(--btn-height-sm)' , fontSize :'var(--typo-xs)' , }, sizeMedium : { minWidth :'var(--btn-width-default)' , height :'var(--btn-height-default)' , fontSize :'var(--typo-default)' , }, sizeLarge : { minWidth :'var(--btn-width-lg)' , height :'var(--btn-height-lg)' , fontSize :'var(--typo-sm)' , }, // inherit containedInherit : { borderColor :'var(--color-default)' , backgroundColor :'var(--color-default)' , color :'var(--color-light)' , }, outlinedInherit : { borderColor :'var(--color-default)' , backgroundColor :'transparent' , color :'var(--color-default)' , }, // primary containedPrimary : { backgroundColor :'var(--color-primary)' , borderColor :'var(--color-primary)' , color :'var(--color-light)' , '&:hover' : { backgroundColor :'var(--color-primary-dark)' , borderColor :'var(--color-primary-dark)' , color :'var(--color-light)' , }, }, outlinedPrimary : { backgroundColor :'transparent' , borderColor :'var(--color-primary)' , color :'var(--color-primary)' , '&:hover' : { backgroundColor :'var(--color-primary-light)' , borderColor :'var(--color-primary-light)' , color :'var(--color-light)' , }, }, // secondary containedSecondary : { backgroundColor :'var(--color-secondary)' , borderColor :'var(--color-secondary)' , color :'var(--color-light)' , '&:hover' : { backgroundColor :'var(--color-secondary-dark)' , borderColor :'var(--color-secondary-dark)' , color :'var(--color-light)' , }, }, outlinedSecondary : { backgroundColor :'transparent' , borderColor :'var(--color-secondary)' , color :'var(--color-secondary)' , '&:hover' : { backgroundColor :'var(--color-secondary-light)' , borderColor :'var(--color-secondary-light)' , color :'var(--color-dark)' , }, }, // error containedError : { backgroundColor :'var(--color-error)' , borderColor :'var(--color-error)' , color :'var(--color-light)' , '&:hover' : { backgroundColor :'var(--color-error-dark)' , borderColor :'var(--color-error-dark)' , color :'var(--color-light)' , }, }, outlinedError : { backgroundColor :'transparent' , borderColor :'var(--color-error)' , color :'var(--color-error)' , '&:hover' : { backgroundColor :'var(--color-error-light)' , borderColor :'var(--color-error-light)' , color :'var(--color-light)' , }, }, // warning containedWarning : { backgroundColor :'var(--color-warning)' , borderColor :'var(--color-warning)' , color :'var(--color-light)' , '&:hover' : { backgroundColor :'var(--color-warning-dark)' , borderColor :'var(--color-warning-dark)' , color :'var(--color-light)' , }, }, containedWarning : { backgroundColor :'transparent' , borderColor :'var(--color-warning)' , color :'var(--color-warning)' , '&:hover' : { backgroundColor :'var(--color-warning-light)' , borderColor :'var(--color-warning-light)' , color :'var(--color-light)' , }, }, // success containedSuccess : { backgroundColor :'var(--color-success)' , borderColor :'var(--color-success)' , color :'var(--color-light)' , '&:hover' : { backgroundColor :'var(--color-success-dark)' , borderColor :'var(--color-success-dark)' , color :'var(--color-light)' , }, }, outlinedSuccess : { backgroundColor :'transparent' , borderColor :'var(--color-success)' , color :'var(--color-success)' , '&:hover' : { backgroundColor :'var(--color-success-light)' , borderColor :'var(--color-success-light)' , color :'var(--color-light)' , }, }, // info containedInfo : { backgroundColor :'var(--color-default)' , borderColor :'var(--color-default)' , color :'var(--color-light)' , '&:hover' : { backgroundColor :'var(--color-dark)' , borderColor :'var(--color-dark)' , color :'var(--color-light)' , }, }, outlinedInfo : { backgroundColor :'transparent' , borderColor :'var(--color-default)' , color :'var(--color-default)' , '&:hover' : { backgroundColor :'var(--color-gray)' , borderColor :'var(--color-gray)' , color :'var(--color-dark)' , }, }, }, }, },});component : text-link
<Button variant="text"> text </Button>
<Button variant="textPrimary"> text </Button>
<Button variant="textSecondary"> text </Button>
<Button variant="textError"> text </Button>
<Button variant="textWarning"> text </Button>
<Button variant="textSuccess"> text </Button>
<Button variant="textInfo"> text </Button>component : size
<Button variant="contained" size="small"> small </Button>
<Button variant="contained" size="medium"> medium </Button>
<Button variant="contained" size="large"> large </Button>
<Button variant="outlined" size="small"> small </Button>
<Button variant="outlined" size="medium"> medium </Button>
<Button variant="outlined" size="large"> large </Button>component : inherit
<Button variant="contained" color="inherit"> inherit </Button>
<Button variant="outlined" color="inherit"> inherit </Button>component : primary
<Button variant="contained" color="primary"> primary </Button>
<Button variant="outlined" color="primary"> primary </Button>component : secondary
<Button variant="contained" color="secondary"> secondary </Button>
<Button variant="outlined" color="secondary"> secondary </Button>component : error
<Button variant="contained" color="error"> error </Button>
<Button variant="outlined" color="error"> error </Button>component : warning
<Button variant="contained" color="warning"> warning </Button>
<Button variant="outlined" color="warning"> warning </Button>component : success
<Button variant="contained" color="success"> success </Button>
<Button variant="outlined" color="success"> success </Button>component : info
<Button variant="contained" color="info"> info </Button>
<Button variant="outlined" color="info"> info </Button>