import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { TypeBold, TypeItalic, TypeText, TypeUnderline, } from "@mynaui/icons-react"; export default function Sizes() { return ( <> <ToggleGroup variant="outline" type="single" size="sm"> <ToggleGroupItem value="bold" aria-label="Toggle bold"> <TypeBold className="size-4" stroke={2} /> </ToggleGroupItem> <ToggleGroupItem value="italic" aria-label="Toggle italic"> <TypeItalic className="size-4" stroke={2} /> </ToggleGroupItem> <ToggleGroupItem value="underline" aria-label="Toggle underline"> <TypeUnderline className="size-4" stroke={2} /> </ToggleGroupItem> <ToggleGroupItem value="text" aria-label="Toggle text"> <TypeText className="size-4" stroke={2} /> </ToggleGroupItem> </ToggleGroup> <ToggleGroup variant="outline" type="single"> <ToggleGroupItem value="bold" aria-label="Toggle bold"> <TypeBold className="size-4" stroke={2} /> </ToggleGroupItem> <ToggleGroupItem value="italic" aria-label="Toggle italic"> <TypeItalic className="size-4" stroke={2} /> </ToggleGroupItem> <ToggleGroupItem value="underline" aria-label="Toggle underline"> <TypeUnderline className="size-4" stroke={2} /> </ToggleGroupItem> <ToggleGroupItem value="text" aria-label="Toggle text"> <TypeText className="size-4" stroke={2} /> </ToggleGroupItem> </ToggleGroup> <ToggleGroup variant="outline" type="single" size="lg"> <ToggleGroupItem value="bold" aria-label="Toggle bold"> <TypeBold className="size-4" stroke={2} /> </ToggleGroupItem> <ToggleGroupItem value="italic" aria-label="Toggle italic"> <TypeItalic className="size-4" stroke={2} /> </ToggleGroupItem> <ToggleGroupItem value="underline" aria-label="Toggle underline"> <TypeUnderline className="size-4" stroke={2} /> </ToggleGroupItem> <ToggleGroupItem value="text" aria-label="Toggle text"> <TypeText className="size-4" stroke={2} /> </ToggleGroupItem> </ToggleGroup> </> ); }

Toggle and Toggle Group

Basic

Single

Outline

With Text

Sizes