@carbon/react
Version:
React components for the Carbon Design System
105 lines (104 loc) • 3.81 kB
TypeScript
/**
* Copyright IBM Corp. 2016, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import React, { ReactNode } from 'react';
import { ButtonSize } from '../Button';
import type { DeprecatedPopoverAlignment, NewPopoverAlignment, PopoverAlignment } from '../Popover';
export declare const IconButtonKinds: readonly ["primary", "secondary", "ghost", "tertiary"];
export type IconButtonKind = (typeof IconButtonKinds)[number];
export type DeprecatedIconButtonAlignment = DeprecatedPopoverAlignment;
export type NewIconButtonAlignment = NewPopoverAlignment;
export type IconButtonAlignment = PopoverAlignment;
export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
/**
* Specify how the trigger should align with the tooltip
*/
align?: IconButtonAlignment;
/**
* **Experimental**: Will attempt to automatically align the tooltip. Requires React v17+
* @see https://github.com/carbon-design-system/carbon/issues/18714
*/
autoAlign?: boolean;
/**
* **Experimental**: Display a badge on the button. An empty/dot badge if 0, a numbered badge if > 0.
* Must be used with size="lg" and kind="ghost"
*/
badgeCount?: number;
/**
* Optionally specify an href for your IconButton to become an `<a>` element
*/
href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];
/**
* Provide an icon or asset to be rendered inside of the IconButton
*/
children?: ReactNode;
/**
* Specify an optional className to be added to your Button
*/
className?: string;
/**
* Determines whether the tooltip should close when inner content is activated (click, Enter or Space)
*/
closeOnActivation?: boolean;
/**
* Specify whether the tooltip should be open when it first renders
*/
defaultOpen?: boolean;
/**
* Specify whether the Button should be disabled, or not
*/
disabled?: boolean;
/**
* Specify whether a drop shadow should be rendered on the tooltip
*/
dropShadow?: boolean;
/**
* Specify the duration in milliseconds to delay before displaying the tooltip
*/
enterDelayMs?: number;
/**
* Render the tooltip using the high-contrast theme
*/
highContrast?: boolean;
/**
* Specify whether the IconButton is currently selected
*/
isSelected?: boolean;
/**
* Specify the type of button to be used as the base for the IconButton
*/
kind?: IconButtonKind;
/**
* Provide the label to be rendered inside of the Tooltip. The label will use
* `aria-labelledby` and will fully describe the child node that is provided.
* This means that if you have text in the child node it will not be
* announced to the screen reader. If using the badgeCount = 0 then provide a
* label with describing there is a new notification.
*/
label: ReactNode;
/**
* Specify the duration in milliseconds to delay before hiding the tooltip
*/
leaveDelayMs?: number;
/**
* Optionally specify a `rel` when using an `<a>` element.
*/
rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
/**
* Specify the size of the Button.
*/
size?: Extract<ButtonSize, 'xs' | 'sm' | 'md' | 'lg'>;
/**
* Optionally specify a `target` when using an `<a>` element.
*/
target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
/**
* Specify an optional className to be added to your Tooltip wrapper
*/
wrapperClasses?: string;
}
declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<unknown>>;
export { IconButton };