first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -0,0 +1,58 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Box from '@mui/material/Box';
|
||||
import Fab from '@mui/material/Fab';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
import FavoriteIcon from '@mui/icons-material/Favorite';
|
||||
import NavigationIcon from '@mui/icons-material/Navigation';
|
||||
|
||||
const BasicFAB = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Basic Favorite
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ '& > :not(style)': { m: 1 } }}>
|
||||
<Fab color="primary" aria-label="add">
|
||||
<AddIcon sx={{ color: "#fff !important" }} />
|
||||
</Fab>
|
||||
|
||||
<Fab color="secondary" aria-label="edit">
|
||||
<EditIcon sx={{ color: "#fff !important" }} />
|
||||
</Fab>
|
||||
|
||||
<Fab variant="extended">
|
||||
<NavigationIcon
|
||||
className="mr-1"
|
||||
/>
|
||||
Navigate
|
||||
</Fab>
|
||||
|
||||
<Fab disabled aria-label="like" sx={{ backgroundColor: "rgba(117, 127, 239, 0.1) !important" }}>
|
||||
<FavoriteIcon />
|
||||
</Fab>
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BasicFAB;
|
||||
@@ -0,0 +1,87 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Button from '@mui/material/Button';
|
||||
|
||||
const BlockButtons = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Block Buttons
|
||||
</Typography>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
color: '#fff !important',
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
color: '#fff !important',
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Secondary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="success"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
color: '#fff !important',
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlockButtons;
|
||||
@@ -0,0 +1,170 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Button from '@mui/material/Button';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import SendIcon from '@mui/icons-material/Send';
|
||||
import PersonIcon from '@mui/icons-material/Person';
|
||||
import CheckIcon from '@mui/icons-material/Check';
|
||||
import InfoIcon from '@mui/icons-material/Info';
|
||||
import WarningIcon from '@mui/icons-material/Warning';
|
||||
|
||||
const ButtonsWithIcon = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px',
|
||||
}}
|
||||
>
|
||||
Buttons With Icon
|
||||
</Typography>
|
||||
|
||||
<Stack
|
||||
sx={{
|
||||
display: 'inline-block'
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
startIcon={<PersonIcon sx={{ color: '#fff !important' }} />}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: '#fff !important',
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
startIcon={<AddIcon sx={{ color: '#fff !important' }} />}
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: '#fff !important',
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Secondary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
startIcon={<CheckIcon sx={{ color: '#fff !important' }} />}
|
||||
variant="contained"
|
||||
color="success"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: '#fff !important',
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
startIcon={<InfoIcon sx={{ color: '#fff !important' }} />}
|
||||
variant="contained"
|
||||
color="info"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: '#fff !important',
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Info
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
startIcon={<WarningIcon sx={{ color: '#fff !important' }} />}
|
||||
variant="contained"
|
||||
color="warning"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: '#fff !important',
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
startIcon={<DeleteIcon sx={{ color: '#fff !important' }} />}
|
||||
variant="contained"
|
||||
color="danger"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: '#fff !important',
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Danger
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
startIcon={<SendIcon sx={{ color: '#fff !important' }} />}
|
||||
variant="contained"
|
||||
color="dark"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: '#fff !important',
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Dark
|
||||
</Button>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ButtonsWithIcon;
|
||||
@@ -0,0 +1,156 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Button from '@mui/material/Button';
|
||||
|
||||
const DefaultButtons = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px',
|
||||
}}
|
||||
>
|
||||
Default Buttons
|
||||
</Typography>
|
||||
|
||||
<Stack
|
||||
sx={{
|
||||
display: 'inline-block'
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Secondary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="success"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="info"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Info
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="warning"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="danger"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Danger
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="dark"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Dark
|
||||
</Button>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DefaultButtons;
|
||||
@@ -0,0 +1,54 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import LoadingButton from '@mui/lab/LoadingButton';
|
||||
import SaveIcon from '@mui/icons-material/Save';
|
||||
import Stack from '@mui/material/Stack';
|
||||
|
||||
const Loading = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Loading
|
||||
</Typography>
|
||||
|
||||
<Stack direction="row" spacing={2}>
|
||||
<LoadingButton loading variant="outlined" className="for-dark-border">
|
||||
Submit
|
||||
</LoadingButton>
|
||||
|
||||
<LoadingButton loading loadingIndicator="Loading…" variant="outlined" className="for-dark-border whiteColor">
|
||||
Fetch data
|
||||
</LoadingButton>
|
||||
|
||||
<LoadingButton
|
||||
loading
|
||||
loadingPosition="start"
|
||||
startIcon={<SaveIcon />}
|
||||
variant="outlined"
|
||||
className="for-dark-border"
|
||||
>
|
||||
Save
|
||||
</LoadingButton>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Loading;
|
||||
@@ -0,0 +1,143 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Button from '@mui/material/Button';
|
||||
|
||||
const OutlineButtons = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Outline Buttons
|
||||
</Typography>
|
||||
|
||||
<Stack
|
||||
sx={{
|
||||
display: 'inline-block'
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px primary"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px secondary"
|
||||
>
|
||||
Secondary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="success"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px success"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="info"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px info"
|
||||
>
|
||||
Info
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="warning"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px warning"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="danger"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px danger"
|
||||
>
|
||||
Danger
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="dark"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px dark"
|
||||
>
|
||||
Dark
|
||||
</Button>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default OutlineButtons;
|
||||
@@ -0,0 +1,143 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Button from '@mui/material/Button';
|
||||
|
||||
const OutlineRoundedButtons = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Outline Rounded Buttons
|
||||
</Typography>
|
||||
|
||||
<Stack
|
||||
sx={{
|
||||
display: 'inline-block'
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px primary"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px secondary"
|
||||
>
|
||||
Secondary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="success"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px success"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="info"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px info"
|
||||
>
|
||||
Info
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="warning"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px warning"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="danger"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px danger"
|
||||
>
|
||||
Danger
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="dark"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Dark
|
||||
</Button>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default OutlineRoundedButtons;
|
||||
@@ -0,0 +1,156 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Button from '@mui/material/Button';
|
||||
|
||||
const RoundedButtons = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px',
|
||||
}}
|
||||
>
|
||||
Rounded Buttons
|
||||
</Typography>
|
||||
|
||||
<Stack
|
||||
sx={{
|
||||
display: 'inline-block'
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Secondary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="success"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="info"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Info
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="warning"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="danger"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Danger
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="dark"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '30px',
|
||||
mt: '10px',
|
||||
color: '#fff',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Dark
|
||||
</Button>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default RoundedButtons;
|
||||
@@ -0,0 +1,81 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
|
||||
const SizesButtons = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Sizes
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ '& button': { m: 1 } }}>
|
||||
<div>
|
||||
<Button size="small">Small</Button>
|
||||
<Button size="medium">Medium</Button>
|
||||
<Button size="large">Large</Button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Button variant="outlined" size="small">
|
||||
Small
|
||||
</Button>
|
||||
|
||||
<Button variant="outlined" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
|
||||
<Button variant="outlined" size="large">
|
||||
Large
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="small"
|
||||
sx={{ color: "#fff !important" }}
|
||||
>
|
||||
Small
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
size="medium"
|
||||
sx={{ color: "#fff !important" }}
|
||||
>
|
||||
Medium
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
size="large"
|
||||
sx={{ color: "#fff !important" }}
|
||||
>
|
||||
Large
|
||||
</Button>
|
||||
</div>
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SizesButtons;
|
||||
@@ -0,0 +1,144 @@
|
||||
import * as React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Button from '@mui/material/Button';
|
||||
|
||||
const SoftButtons = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Soft Buttons
|
||||
</Typography>
|
||||
|
||||
<Stack
|
||||
sx={{
|
||||
display: 'inline-block'
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.1)',
|
||||
color: '#757FEF',
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
mt: '10px'
|
||||
}}
|
||||
className="mr-10px primary"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.1)',
|
||||
color: '#818093',
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
mt: '10px'
|
||||
}}
|
||||
className="mr-10px secondary"
|
||||
>
|
||||
Secondary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.1)',
|
||||
color: '#00B69B',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
}}
|
||||
className="mr-10px success"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.1)',
|
||||
color: '#2DB6F5',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
}}
|
||||
className="mr-10px info"
|
||||
>
|
||||
Info
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.1)',
|
||||
color: '#FFBC2B',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
}}
|
||||
className="mr-10px warning"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.1)',
|
||||
color: '#EE368C',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
}}
|
||||
className="mr-10px danger"
|
||||
>
|
||||
Danger
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.1)',
|
||||
color: '#260944',
|
||||
p: '10px 30px',
|
||||
fontSize: '14px',
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '10px',
|
||||
mt: '10px',
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Dark
|
||||
</Button>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SoftButtons;
|
||||
Reference in New Issue
Block a user