Components

Button utility

Icon-only button for toolbars and row actions. Two colours, two sizes, an optional tooltip that doubles as the accessible name, and a link variant when given an href - driven from config/design-system.config.ts.

Component Playground

Live instance - the controls read their options from the same config that drives the Variants section below.

secondary · sm · enabled

Controls

Colour

Size

Icon

Tooltip

Colours

secondary (default) has a white fill and a ring; tertiary has neither until hovered.

Secondary / Tertiary

secondary

tertiary

Sizes

Two sizes - xs (16px icon) and sm (20px icon, default).

XS / SM

xs

sm

With tooltip

tooltip shows on hover and focus and is also the aria-label. An icon-only button without one needs an aria-label of its own.

Tooltip placements

top

bottom

left

right

As link

Pass an href to render an anchor with the same look.

Link

Disabled

Dims the button and removes the tooltip.

Disabled

API

ButtonUtility renders a React Aria Button, or a Link when href is set, so the props of either apply.

Prop	Type	Default
`icon`	`FC<{ className?: string }> \| ReactNode`	`-`
`tooltip`	`string`	`- (also the aria-label)`
`tooltipPlacement`	`Placement`	`"top"`
`color`	`"secondary" \| "tertiary"`	`"secondary"`
`size`	`"xs" \| "sm"`	`"sm"`
`isDisabled`	`boolean`	`false`
`href`	`string \| undefined`	`- (renders a link when set)`
`onPress`	`(e: PressEvent) => void`	`-`
`className`	`string`	`-`

Usage

import { Edit05 } from "@untitledui/icons";
import { ButtonUtility } from "@/components/base/buttons/button-utility";

<ButtonUtility icon={Edit05} tooltip="Edit" color="tertiary" size="xs" onPress={onEdit} />

Figma

No linked Figma file yet - this component was pulled in via the Untitled UI CLI, not designed in Figma first.