InlineButton

InlineButton is an inline, text-flowing action trigger. It flows with surrounding text, wraps naturally across line breaks, and supports color, loading, and disabled/aria-disabled states. Use the as prop to render a different underlying element.

OverviewPropertiesUsageAccessibilityChangelog

InlineButtonProps

Signature:

export declare type InlineButtonProps<E extends > = <E, >;

InlineButtonOwnProps

extends, , , , , ,

Name	Type	Default	Description
onClick?			Called when the button is clicked. Not invoked while the button is disabled or loading.
disabled?		false	If a button is disabled, it cannot be interacted with: it leaves the tab order and its pointer and click events are blocked.
color?	| | | |	'neutral'	The text, icon, and underline/hover color.
loading?		false	The current loading state of the button. If true, a loading icon is shown with aria-disabled=true and aria-busy=true. The button stays in the tab order unless disabled is also set.
'aria-expanded'?	| |		Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
'aria-haspopup'?	| | | | | | |		Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
'aria-controls'?			Identifies the element (or elements) whose contents or presence are controlled by the current element.

InlineButton.Prefix

InlineButtonPrefixProps

extends, ,

Name	Type	Default	Description
children

You can use the InlineButton.Prefix component to render content (an icon, for example) right before the label, as shown above.

InlineButton.Suffix

InlineButtonSuffixProps

extends, ,

Name	Type	Default	Description
children

You can use the InlineButton.Suffix component to render content (an icon, for example) right after the label, as shown above.