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