@carbon/react
Version:
React components for the Carbon Design System
103 lines (102 loc) • 3.87 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';
export declare const IconButtonKinds: readonly ["primary", "secondary", "ghost", "tertiary"];
export type IconButtonKind = (typeof IconButtonKinds)[number];
export type DeprecatedIconButtonAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
export type NewIconButtonAlignment = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
export type IconButtonAlignment = DeprecatedIconButtonAlignment | NewIconButtonAlignment;
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
*/
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, '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 };