72 lines
2.5 KiB
TypeScript
72 lines
2.5 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import React, { useCallback, useState } from 'react';
|
||
|
|
import { Button } from '../../src/primitive-components/material-you-components';
|
||
|
|
|
||
|
|
export default function Buttons() {
|
||
|
|
const [state, setState] = useState(1);
|
||
|
|
|
||
|
|
const callback = useCallback(
|
||
|
|
() => setState(prevState => prevState + 1),
|
||
|
|
[state],
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={'m3 m3-wrapper'}>
|
||
|
|
<h1> Buttons </h1>
|
||
|
|
<div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
|
||
|
|
<div>
|
||
|
|
<h2> Default buttons </h2>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'column',
|
||
|
|
width: '150px',
|
||
|
|
gap: '0.5em',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Button
|
||
|
|
centralRipple
|
||
|
|
onClick={callback}
|
||
|
|
variant={'filled'}
|
||
|
|
>
|
||
|
|
Label + {state}
|
||
|
|
</Button>
|
||
|
|
<Button variant={'outlined'}>Label</Button>
|
||
|
|
<Button variant={'tonal'}>Label</Button>
|
||
|
|
<Button variant={'elevated'}>Label</Button>
|
||
|
|
<Button variant={'text'}>Label</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h2> Buttons with icon </h2>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'column',
|
||
|
|
width: '150px',
|
||
|
|
gap: '0.5em',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Button icon={'add'} variant={'filled'}>
|
||
|
|
Label
|
||
|
|
</Button>
|
||
|
|
<Button icon={'add'} variant={'outlined'}>
|
||
|
|
Label
|
||
|
|
</Button>
|
||
|
|
<Button icon={'add'} variant={'tonal'}>
|
||
|
|
Label
|
||
|
|
</Button>
|
||
|
|
<Button icon={'add'} variant={'elevated'}>
|
||
|
|
Label
|
||
|
|
</Button>
|
||
|
|
<Button icon={'add'} variant={'text'}>
|
||
|
|
Label
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|