Files
react-test/docs/data/joy/components/snackbar/SnackbarVariants.js
how2ice 005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
init project
2025-12-12 14:26:25 +09:00

67 lines
1.4 KiB
JavaScript

import * as React from 'react';
import Button from '@mui/joy/Button';
import Stack from '@mui/joy/Stack';
import Snackbar from '@mui/joy/Snackbar';
export default function SnackbarVariants() {
const [open, setOpen] = React.useState(false);
const [variant, setVariant] = React.useState('outlined');
return (
<Stack spacing={2} direction="row">
<Button
variant="plain"
color="neutral"
onClick={() => {
setOpen(true);
setVariant('plain');
}}
>
plain
</Button>
<Button
variant="outlined"
color="neutral"
onClick={() => {
setOpen(true);
setVariant('outlined');
}}
>
outlined
</Button>
<Button
variant="soft"
color="neutral"
onClick={() => {
setOpen(true);
setVariant('soft');
}}
>
soft
</Button>
<Button
variant="solid"
color="neutral"
onClick={() => {
setOpen(true);
setVariant('solid');
}}
>
solid
</Button>
<Snackbar
autoHideDuration={3000}
open={open}
variant={variant}
onClose={(event, reason) => {
if (reason === 'clickaway') {
return;
}
setOpen(false);
}}
>
A snackbar with {variant} variant.
</Snackbar>
</Stack>
);
}