material-you-react/app/components/buttons.tsx

61 lines
2.2 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={"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 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>
);
}