Inline Icon Button

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

Examples

Showcase

Brand

<InlineIconButton icon={X} />

Variants

Brand

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

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'

Icon Button

Checkbox

Inline Icon Button

Examples

Showcase

Variants

API

<InlineIconButton>

Icon