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

116 lines
5.2 KiB
TypeScript
Raw Normal View History

2024-01-25 22:43:42 +03:00
"use client"
import React from 'react';
import {IconButton} from "../../src/primitive-components/material-you-components";
function IconButtons() {
return (
<div className={"m3 m3-wrapper"}>
<h1> Icon buttons </h1>
<div style={{display: "flex", flexDirection: "column", gap: "2em"}}>
<div>
<h2> Default buttons </h2>
<div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>
<IconButton icon={"settings"}/>
<IconButton icon={"settings"} variant={"filled"}/>
<IconButton icon={"settings"} variant={"tonal"}/>
<IconButton icon={"settings"} variant={"outlined"}/>
</div>
<h2> Disabled default buttons </h2>
<div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>
<IconButton icon={"settings"} disabled/>
<IconButton icon={"settings"} variant={"filled"} disabled/>
<IconButton icon={"settings"} variant={"tonal"} disabled/>
<IconButton icon={"settings"} variant={"outlined"} disabled/>
</div>
</div>
<div>
<h2> Toggle buttons </h2>
<div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>
<IconButton icon={"settings"} toggled={
{
selected: "settings",
unselected: "settings",
}
}/>
<IconButton icon={"settings"} variant={"filled"} toggled={
{
selected: "settings",
unselected: "settings",
}
}/>
<IconButton icon={"settings"} variant={"tonal"} toggled={
{
selected: "settings",
unselected: "settings",
}
}/>
<IconButton icon={"settings"} variant={"outlined"} toggled={
{
selected: "settings",
unselected: "settings",
}
}/>
</div>
<h2> Disabled toggle buttons </h2>
<div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>
<IconButton icon={"settings"} toggled={
{
selected: "settings",
unselected: "settings",
}
} disabled/>
<IconButton icon={"settings"} variant={"filled"} toggled={
{
selected: "settings",
unselected: "settings",
}
} disabled/>
<IconButton icon={"settings"} variant={"tonal"} toggled={
{
selected: "settings",
unselected: "settings",
}
} disabled/>
<IconButton icon={"settings"} variant={"outlined"} toggled={
{
selected: "settings",
unselected: "settings",
}
} disabled/>
</div>
<h2> Disabled selected toggle buttons </h2>
<div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>
<IconButton icon={"settings"} toggled={
{
selected: "settings",
unselected: "settings",
}
} disabled selected/>
<IconButton icon={"settings"} variant={"filled"} toggled={
{
selected: "settings",
unselected: "settings",
}
} disabled selected/>
<IconButton icon={"settings"} variant={"tonal"} toggled={
{
selected: "settings",
unselected: "settings",
}
} disabled selected/>
<IconButton icon={"settings"} variant={"outlined"} toggled={
{
selected: "settings",
unselected: "settings",
}
} disabled selected/>
</div>
</div>
</div>
</div>
);
}
export default IconButtons;