Button Icon is an icon-only action button for compact interactions where no text label is needed. Use it for actions such as close, expand, edit, or secondary utility actions in toolbars and cards.

Figma

The Button Icon is a customizable component designed to display a mini, small, medium or large button icon with different styles and background colors.

1. Reference

This component inherits props from the Button Icon.

Prop

Type

Default

type

primary

secondary

tertiary

primary

state

default

pressed

disabled

default

size

2. Type

You can edit the type with the primary, secondary or tertiary parameter.

Image 2.1 : Type primary

Image 2.2 : Type secondary

Image 2.3 : Type tertiary

3. State

You can edit the state with the default, pressed or disabled parameter.

Image 3.1 : State default

Image 3.2 : State pressed

Image 3.3 : State disabled

4. Size

You can edit the size with the lg, md, sm or xs parameter.

Image 4.1 : Size lg

Image 4.2 : Size md

Image 4.3 : Size sm

Image 4.4 : Size xs

SwiftUI

The DLButtonIcon component provides a flexible, customizable button with an icon-only design. It supports different sizes, styles, and states, making it suitable for a wide variety of use cases.

1. Reference

This component inherits props from the Button Icon.

Prop

Type

Default

type

.primary

.secondary

.tertiary

.primary

icon

"icon"

size

.xs

.sm

.md

.lg

state

.normal

.disabled

.normal

action

2. Type

You can edit the type with the .primary, .secondary or .tertiary parameter.

DLButtonIcon(
type: .primary,
size: .lg,
icon: "ic_Placeholder"
)

DLButtonIconn(
type: .secondary,
size: .lg,
icon: "ic_Placeholder"
)

DLButtonIcon(
type: .tertiary,
size: .lg,
icon: "ic_Placeholder"
)

3. Size

You can edit the size with the .xs, .sm, .md or .lg parameter.

DLButtonIcon(
type: .primary,
size: .lg,
icon: "ic_Placeholder"
)

DLButtonIcon(
type: .primary,
size: .md,
icon: "ic_Placeholder"
)

DLButtonIcon(
type: .primary,
size: .sm,
icon: "ic_Placeholder"
)

DLButtonIcon(
type: .primary,
size: .xs,
icon: "ic_Placeholder"
)

4. State

You can edit the state state with .normal or .disabled parameter

DLButtonIcon(
type: .primary,
size: .lg,
icon: "ic_Placeholder",
state: .disabled
)

DLButtonIcon(
type: .secondary,
size: .lg,
icon: "ic_Placeholder",
state: .disabled
)

DLButtonIcon(
type: .tertiary,
size: .lg,
icon: "ic_Placeholder",
state: .disabled
)

Jetpack Compose

The ButtonIcon component provides a flexible, customizable button with an icon-only design. It supports different sizes, styles, and states, making it suitable for a wide variety of use cases.

1. Reference

This component inherits props from the Button Icon.

Prop

Type

Default

type

ButtonIconType.primary

ButtonIconType.secondary

ButtonIconType.tertiary

ButtonIconType.primary

icon

"icon"

size

ButtonIconSize.xs

ButtonIconSize.sm

ButtonIconSize.md

ButtonIconSize.lg

state

ButtonIconState.default

ButtonIconState.disabled

ButtonIconState.default

action

2. Type

You can edit the type with the ButtonIconType.primary, ButtonIconType.secondary or ButtonIconType.tertiary parameter.

ButtonIcon(
onClick = { },
size = IconButtonSize.lg,
type = IconButtonType.primary,
icon = IconButtonIconType.Drawable(R.drawable.ic_crop)
)

ButtonIcon(
onClick = { },
size = IconButtonSize.lg,
type = IconButtonType.secondary,
icon = IconButtonIconType.Drawable(R.drawable.ic_crop)
)

ButtonIcon(
onClick = { },
size = IconButtonSize.lg,
type = IconButtonType.tertiary,
icon = IconButtonIconType.Drawable(R.drawable.ic_crop)
)

3. Size

You can edit the size with the ButtonIconSize.xs, ButtonIconSize.sm, ButtonIconSize.md or ButtonIconSize.lg parameter.

ButtonIcon(
onClick = { },
size = IconButtonSize.lg,
type = IconButtonType.primary,
icon = IconButtonIconType.Drawable(R.drawable.ic_crop)
)

ButtonIcon(
onClick = { },
size = IconButtonSize.md,
type = IconButtonType.primary,
icon = IconButtonIconType.Drawable(R.drawable.ic_crop)
)

ButtonIcon(
onClick = { },
size = IconButtonSize.sm,
type = IconButtonType.primary,
icon = IconButtonIconType.Drawable(R.drawable.ic_crop)
)

ButtonIcon(
onClick = { },
size = IconButtonSize.xs,
type = IconButtonType.primary,
icon = IconButtonIconType.Drawable(R.drawable.ic_crop)
)

4. State

You can edit the state state with ButtonIconState.default or ButtonIconState.disabled parameter

ButtonIcon(
onClick = { },
size = IconButtonSize.lg,
type = IconButtonType.primary,
icon = IconButtonIconType.Drawable(R.drawable.ic_crop),
state = ButtonIconState.disabled
)

ButtonIcon(
onClick = { },
size = IconButtonSize.lg,
type = IconButtonType.secondary,
icon = IconButtonIconType.Drawable(R.drawable.ic_crop),
state = ButtonIconState.disabled
)

ButtonIcon(
onClick = { },
size = IconButtonSize.lg,
type = IconButtonType.tertiary,
icon = IconButtonIconType.Drawable(R.drawable.ic_crop),
state = ButtonIconState.disabled
)

Preview

Code

DlButtonIcon(
  icon: const DlPlaceholderIcon(),
  type: DlButtonType.primary,
  size: DlButtonSize.lg,
  onPressed: () {},
)

Copy

Usage

Add this code example to your project to see how the component works.

DlButtonIcon(
  icon: const DlPlaceholderIcon(),
  type: DlButtonType.primary,
  size: DlButtonSize.lg,
  onPressed: () {},
)

Copy

API Reference

The DlButtonIcon component is an icon-only action button built on top of Dynamic Layer button styles, with support for variants, sizes, and interaction states. It is used when you need a compact, tap-friendly control without a text label, while keeping visual behavior consistent with DlButton.

Prop

Type

Default

icon

Widget

onPressed

VoidCallback?

null

type

primary

secondary

tertiary

ghost

primary

size

state

defaultState

pressed

disabled

defaultState

Examples

Variants

Preview

Code

Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    DlButtonIcon(
      icon: const DlPlaceholderIcon(),
      type: DlButtonType.primary,
      onPressed: () {},
    ),
    const SizedBox(width: DlSpacingTokens.p_8),
    DlButtonIcon(
      icon: const DlPlaceholderIcon(),
      type: DlButtonType.secondary,
      onPressed: () {},
    ),
    const SizedBox(width: DlSpacingTokens.p_8),
    DlButtonIcon(
      icon: const DlPlaceholderIcon(),
      type: DlButtonType.tertiary,
      onPressed: () {},
    ),
    const SizedBox(width: DlSpacingTokens.p_8),
    DlButtonIcon(
      icon: const DlPlaceholderIcon(),
      type: DlButtonType.ghost,
      onPressed: () {},
    ),
  ],
)

Copy

Size

Preview

Code

Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    DlButtonIcon(
      icon: const DlPlaceholderIcon(),
      size: DlButtonSize.lg,
      onPressed: () {},
    ),
    const SizedBox(width: DlSpacingTokens.p_8),
    DlButtonIcon(
      icon: const DlPlaceholderIcon(),
      size: DlButtonSize.md,
      onPressed: () {},
    ),
    const SizedBox(width: DlSpacingTokens.p_8),
    DlButtonIcon(
      icon: const DlPlaceholderIcon(),
      size: DlButtonSize.sm,
      onPressed: () {},
    ),
    const SizedBox(width: DlSpacingTokens.p_8),
    DlButtonIcon(
      icon: const DlPlaceholderIcon(),
      size: DlButtonSize.xs,
      onPressed: () {},
    ),
  ],
)

Copy

Disabled

Preview

Code

Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    DlButtonIcon(
      icon: const DlPlaceholderIcon(),
      type: DlButtonType.primary,
      state: DlButtonState.disabled,
      onPressed: () {},
    ),
    const SizedBox(width: DlSpacingTokens.p_8),
    DlButtonIcon(
      icon: const DlPlaceholderIcon(),
      type: DlButtonType.secondary,
      state: DlButtonState.disabled,
      onPressed: () {},
    ),
    const SizedBox(width: DlSpacingTokens.p_8),
    DlButtonIcon(
      icon: const DlPlaceholderIcon(),
      type: DlButtonType.tertiary,
      state: DlButtonState.disabled,
      onPressed: () {},
    ),
    const SizedBox(width: DlSpacingTokens.p_8),
    DlButtonIcon(
      icon: const DlPlaceholderIcon(),
      type: DlButtonType.ghost,
      state: DlButtonState.disabled,
      onPressed: () {},
    ),
  ],
)

Copy

Discover more content

Figma

Github

You have questions or need help?

E-Mail

You want to try?

Test for free

Save time and money?

Get Pro Version