AI Icon Button

An icon button serves as a trigger for activating and launching the AI-powered features.

Overview

Code

Anatomy

  1. AI border
  2. AI Spark

The AI Icon Button component inherits its functionality and guidelines from the core Occam Icon Button.

Usage Guidelines

Use When

  • Launching or activating a Zuora AI-powered feature.
  • Providing a quick, lightweight trigger for AI actions.
  • Placing AI access inline with content where a full button would be visually heavy.
  • Offering secondary entry points to AI features alongside primary actions.

Best Practices

  • Use icon buttons only for launching AI-powered features.
  • Pair with a tooltip or label to clarify the AI action and improve accessibility.
  • Use sparingly — icon buttons should not replace primary AI action buttons.
  • Ensure icons are recognizable and clearly associated with the AI action.

Variants

Contained

minimal

Crafted with ❤️ at Zuora

© 2025 Zuora Inc.

AI Icon Button

An icon button serves as a trigger for activating and launching the AI-powered features.

Overview

Code

Anatomy

  1. AI border
  2. AI Spark

The AI Icon Button component inherits its functionality and guidelines from the core Occam Icon Button.

Usage Guidelines

Use When

  • Launching or activating a Zuora AI-powered feature.
  • Providing a quick, lightweight trigger for AI actions.
  • Placing AI access inline with content where a full button would be visually heavy.
  • Offering secondary entry points to AI features alongside primary actions.

Best Practices

  • Use icon buttons only for launching AI-powered features.
  • Pair with a tooltip or label to clarify the AI action and improve accessibility.
  • Use sparingly — icon buttons should not replace primary AI action buttons.
  • Ensure icons are recognizable and clearly associated with the AI action.

Variants

Contained

minimal

Crafted with ❤️ at Zuora

© 2025 Zuora Inc.

AI Icon Button

An icon button serves as a trigger for activating and launching the AI-powered features.

Overview

Code

Anatomy

  1. AI border
  2. AI Spark

The AI Icon Button component inherits its functionality and guidelines from the core Occam Icon Button.

Usage Guidelines

Use When

  • Launching or activating a Zuora AI-powered feature.
  • Providing a quick, lightweight trigger for AI actions.
  • Placing AI access inline with content where a full button would be visually heavy.
  • Offering secondary entry points to AI features alongside primary actions.

Best Practices

  • Use icon buttons only for launching AI-powered features.
  • Pair with a tooltip or label to clarify the AI action and improve accessibility.
  • Use sparingly — icon buttons should not replace primary AI action buttons.
  • Ensure icons are recognizable and clearly associated with the AI action.

Variants

Contained

minimal

Crafted with ❤️ at Zuora

© 2025 Zuora Inc.

On This Page

AI Icon Button

An icon button serves as a trigger for activating and launching the AI-powered features.

Overview

Code

Anatomy

  1. AI border
  2. AI Spark

The AI Icon Button component inherits its functionality and guidelines from the core Occam Icon Button.

Usage Guidelines

Use When

  • Launching or activating a Zuora AI-powered feature.
  • Providing a quick, lightweight trigger for AI actions.
  • Placing AI access inline with content where a full button would be visually heavy.
  • Offering secondary entry points to AI features alongside primary actions.

Best Practices

  • Use icon buttons only for launching AI-powered features.
  • Pair with a tooltip or label to clarify the AI action and improve accessibility.
  • Use sparingly — icon buttons should not replace primary AI action buttons.
  • Ensure icons are recognizable and clearly associated with the AI action.

Variants

Contained

minimal

Crafted with ❤️ at Zuora

© 2025 Zuora Inc.

On This Page

AI Icon Button

An icon button serves as a trigger for activating and launching the AI-powered features.

Overview

Code

Anatomy

  1. AI border
  2. AI Spark

The AI Icon Button component inherits its functionality and guidelines from the core Occam Icon Button.

Usage Guidelines

Use When

  • Launching or activating a Zuora AI-powered feature.
  • Providing a quick, lightweight trigger for AI actions.
  • Placing AI access inline with content where a full button would be visually heavy.
  • Offering secondary entry points to AI features alongside primary actions.

Best Practices

  • Use icon buttons only for launching AI-powered features.
  • Pair with a tooltip or label to clarify the AI action and improve accessibility.
  • Use sparingly — icon buttons should not replace primary AI action buttons.
  • Ensure icons are recognizable and clearly associated with the AI action.

Variants

Contained

minimal

Crafted with ❤️ at Zuora

© 2025 Zuora Inc.