Site settings
Change the appearance of the site to suit your preferences
IconButton
Icon Button is a round button with no text and one icon only.
Different variants
<Flex gap={1} flexWrap="wrap" alignItems="center"> <IconButton variant="primary" icon={<EditOutline24Icon />} aria-label="primary button" /> <IconButton variant="secondary" icon={<EditOutline24Icon />} aria-label="secondary button" /> <IconButton variant="tertiary" icon={<EditOutline24Icon />} aria-label="tertiary button" /> <IconButton variant="ghost" icon={<EditOutline24Icon />} aria-label="ghost button" /> <IconButton variant="floating" icon={<EditOutline24Icon />} aria-label="floating button" /> </Flex>
Different sizes
<Flex gap={1} flexWrap="wrap" alignItems="center"> <IconButton variant="primary" size="xs" icon={<EditOutline18Icon />} aria-label="extra small button" /> <IconButton variant="primary" size="sm" icon={<EditOutline18Icon />} aria-label="small button" /> <IconButton variant="primary" size="md" icon={<EditOutline24Icon />} aria-label="medium button" /> <IconButton variant="primary" size="lg" icon={<EditOutline30Icon />} aria-label="large button" /> </Flex>
Loading icon buttons
<Flex gap={1} flexWrap="wrap" alignItems="center"> <IconButton variant="primary" loading size="xs" icon={<EditOutline18Icon />} aria-label="extra small button" /> <IconButton variant="tertiary" loading size="sm" icon={<EditOutline18Icon />} aria-label="small button" /> <IconButton variant="primary" loading size="md" icon={<EditOutline24Icon />} aria-label="medium button" /> <IconButton variant="tertiary" loading size="lg" icon={<EditOutline30Icon />} aria-label="large button" /> </Flex>