Icon button

Last updated: 2.0.0 (18/01/2024)

A simple button component designed to render icons. Uses the Icon component to apply styles to Tabler icons. IconButton components will be square by default.

Usage

import { IconButton } from "@valence-ui/core";
import { IconPlus } from "@tabler/icons-react";

function MyComponent() { 
    return ( 
        <IconButton
            size="md"
            radius="sm"
            variant="light"
        >
            <IconPlus />
        </IconButton>
    )
}

Adding a tooltip

Use the tooltip prop to pass any text to be used as a tooltip around this button. The tooltip will inherit the button's color, regardless of its variant.

This is effectively the same as wrapping the button in an uncontrolled Tooltip component. Additional props can be applied using the tooltipProps and tooltipContentProps props.

Props

Extends PrimitiveButtonProps.

Property	Type	Description
tooltip	string	An optional tooltip to include. The tooltip will inherit the button's color.
tooltipProps	TooltipProps	Optional props to pass to the tooltip.
tooltipContentProps	TooltipContentProps	Additional props to pass to the content sub-component of the tooltip.