Inline Icon Button

Inline icon buttons provide a compact, icon-only action trigger designed for use within text content or tight spaces where a full button would be too prominent.

import {InlineIconButton} from "@qualcomm-ui/react/inline-icon-button"

Accessibility Guidelines

Icon-only buttons rely on visual cues that screen readers cannot access. Use aria-label or aria-labelledby to give every icon-only button an accessible name so its purpose is clear to assistive technologies.

Examples

Showcase

This example shows basic usage with a close icon.

<InlineIconButton aria-label="Close" icon={X} />

Variants

The emphasis prop controls button rendering. The default adapts to the current theme. Use persistent-black on light backgrounds and persistent-white on dark backgrounds.

<InlineIconButton aria-label="Close" icon={X} />
<div className="bg-persistent-white p-2">
  <InlineIconButton
    aria-label="Close"
    emphasis="persistent-black"
    icon={X}
  />
</div>
<div className="bg-persistent-black p-2">
  <InlineIconButton
    aria-label="Close"
    emphasis="persistent-white"
    icon={X}
  />
</div>

API

<InlineIconButton>

A small button with an icon that can be used to trigger an action. Typically used within input fields, menu items, or other components that require a small action button. Renders a <button> element by default.

Prop	Type	Default
icon ^* Lucide icon to display inside the button.	\| LucideIcon \| ReactNode
emphasis The style variant of the button. Governs color. TODO: link to design system docs.	\| 'neutral' \| 'persistent-white' \| 'persistent-black'	'neutral'
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)
size The size of the button and its icon.	\| 'sm' \| 'md' \| 'lg'	'md'
variant The style variant of the button's icon that controls its size `scale`: The icon size scales with the button's size `fixed`: The icon size is constant, regardless of the button's size	\| 'fixed' \| 'scale'	'fixed'

icon

Type

| LucideIcon
| ReactNode

Description

Lucide icon to display inside the button.

emphasis

Type

| 'neutral'
| 'persistent-white'
| 'persistent-black'

Description

The style variant of the button. Governs color. TODO: link to design system docs.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

size

Type

| 'sm'
| 'md'
| 'lg'

Description

The size of the button and its icon.

variant

Type

| 'fixed'
| 'scale'

Description

The style variant of the button's icon that controls its size

scale: The icon size scales with the button's size
fixed: The icon size is constant, regardless of the button's size

Attribute / Property	Value
`className`	'qui-inline-icon-button__root'
`data-emphasis`	\| 'neutral' \| 'persistent-white' \| 'persistent-black'
`data-scope`	'inline-icon-button'
`data-size`	\| 'sm' \| 'md' \| 'lg'
`data-variant`	\| 'fixed' \| 'scale'

className

Value

'qui-inline-icon-button__root'

data-emphasis

Value

| 'neutral'
| 'persistent-white'
| 'persistent-black'

data-scope

Value

'inline-icon-button'

data-size

Value

| 'sm'
| 'md'
| 'lg'

data-variant

Value

| 'fixed'
| 'scale'

Icon

The inner icon element is rendered with the icon passed to the icon prop.

Attribute / Property	Value
`className`	'qui-inline-icon-button__icon'
`data-emphasis`	\| 'neutral' \| 'persistent-white' \| 'persistent-black'
`data-part`	'icon'
`data-scope`	'inline-icon-button'
`data-variant`	\| 'fixed' \| 'scale'

className

Value

'qui-inline-icon-button__icon'

data-emphasis

Value

| 'neutral'
| 'persistent-white'
| 'persistent-black'

data-part

Value

'icon'

data-scope

Value

'inline-icon-button'

data-variant

Value

| 'fixed'
| 'scale'

Last updated on Feb 5, 2026 by Ryan Bower

Icon Button

Checkbox