116 lines
5.2 KiB
TypeScript
116 lines
5.2 KiB
TypeScript
|
"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;
|