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
|
|
variant={'filled'}
|
|
onClick={callback}
|
|
centralRipple
|
|
>
|
|
Label + {state}
|
|
</Button>
|
|
<Button variant={'elevated'} />
|
|
<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 variant={'filled'} icon={'add'}>
|
|
Label
|
|
</Button>
|
|
<Button variant={'outlined'} icon={'add'}>
|
|
Label
|
|
</Button>
|
|
<Button variant={'tonal'} icon={'add'}>
|
|
Label
|
|
</Button>
|
|
<Button variant={'elevated'} icon={'add'}>
|
|
Label
|
|
</Button>
|
|
<Button variant={'text'} icon={'add'}>
|
|
Label
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|