Files
react-test/docs/data/joy/components/button-group/CustomSeparatorButtonGroup.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

34 lines
860 B
JavaScript

import Button from '@mui/joy/Button';
import ButtonGroup from '@mui/joy/ButtonGroup';
import Divider from '@mui/joy/Divider';
import IconButton from '@mui/joy/IconButton';
import Settings from '@mui/icons-material/Settings';
export default function CustomSeparatorButtonGroup() {
return (
<ButtonGroup
variant="solid"
color="success"
aria-label="button group"
sx={{
'--ButtonGroup-separatorColor': 'none !important',
'& > span': {
zIndex: 3,
background:
'linear-gradient(to top, transparent, rgba(255 255 255 / 0.6), transparent)',
},
}}
>
<Button>One</Button>
<Divider />
<Button>Two</Button>
<Divider />
<Button>Three</Button>
<Divider />
<IconButton>
<Settings />
</IconButton>
</ButtonGroup>
);
}