Skip to main content

IconButton

The IconButton component is a button that displays only an icon, useful for toolbar actions, navigation, and compact UI elements.

Overview​

IconButton provides a compact button solution with:

  • Icon-only display
  • Multiple button types
  • Loading state
  • Block and dashed variants
  • Customizable icon position

Basic Usage​

{
  uuid: "my-icon-button",
  name: "delete_button",
  component_type: "icon-button",
  parameters: {
    icon: "trash"
  },
  input: {
    value: { type: "string", value: "danger" }
  },
  event: {
    click: `
      $showDeleteConfirmation = true;
    `
  }
}

Component Inputs​

PropertyTypeDefaultDescription
valuestring'default'Button type
statestring'default'State: 'default', 'disabled'
loadingbooleanfalseShow loading spinner
blockbooleanfalseFull-width button
dashedbooleanfalseDashed border style
iconPositionstring'left'Icon position
sizestring'medium'Size: 'small', 'medium', 'large'

Parameters​

icon​

Set via parameters object.

parameters: {
  icon: "settings"
}

Common icon names: trash, edit, copy, settings, plus, minus, close, check, search, download, upload.

Events​

click​

Triggered: When button is clicked

event: {
  click: `
    $actionTriggered = true;
    await PerformAction();
  `
}

Common Patterns​

Toolbar Actions​

// Edit button
{
  component_type: "icon-button",
  parameters: { icon: "edit" },
  input: { value: { type: "string", value: "text" } },
  event: { click: `$editMode = true;` }
}

// Delete button
{
  component_type: "icon-button",
  parameters: { icon: "trash" },
  input: { value: { type: "string", value: "danger" } },
  event: { click: `$showDeleteModal = true;` }
}

See Also​