AI Button
AI button is a trigger element that initiates AI-powered actions, such as generating content, summarizing data, or providing intelligent suggestions.
Overview
Code
Anatomy
- AI border
- AI icon
- AI gradient
The AI Button component inherits its functionality and guidelines from the core Occam Button.
Usage Guidelines
Use When
Using only for triggering AI-powered actions.
Best Practices
- Labeling clearly and action-oriented. (e.g., “Ask Copilot”, “Generate Summary”).
- Place buttons near related content.
Variants
primary
Button
Secondary
Button
Text
Button
Sizes
medium (36px)
Button
Button
Button
small (32px)
Button
Button
Button
eXTRA small (28px)
Button
Button
Button
Crafted with ❤️ at Zuora
© 2026 Zuora Inc.
AI Button
AI button is a trigger element that initiates AI-powered actions, such as generating content, summarizing data, or providing intelligent suggestions.
Overview
Code
Anatomy
- AI border
- AI icon
- AI gradient
The AI Button component inherits its functionality and guidelines from the core Occam Button.
Usage Guidelines
Use When
Using only for triggering AI-powered actions.
Best Practices
- Labeling clearly and action-oriented. (e.g., “Ask Copilot”, “Generate Summary”).
- Place buttons near related content.
Variants
primary
Button
Secondary
Button
Text
Button
Sizes
medium (36px)
Button
Button
Button
small (32px)
Button
Button
Button
eXTRA small (28px)
Button
Button
Button
Crafted with ❤️ at Zuora
© 2026 Zuora Inc.
AI Button
AI button is a trigger element that initiates AI-powered actions, such as generating content, summarizing data, or providing intelligent suggestions.
Overview
Code
Anatomy
- AI border
- AI icon
- AI gradient
The AI Button component inherits its functionality and guidelines from the core Occam Button.
Usage Guidelines
Use When
Using only for triggering AI-powered actions.
Best Practices
- Labeling clearly and action-oriented. (e.g., “Ask Copilot”, “Generate Summary”).
- Place buttons near related content.
Variants
primary
Button
Secondary
Button
Text
Button
Sizes
medium (36px)
Button
Button
Button
small (32px)
Button
Button
Button
eXTRA small (28px)
Button
Button
Button
Crafted with ❤️ at Zuora
© 2026 Zuora Inc.
On This Page
AI Button
AI button is a trigger element that initiates AI-powered actions, such as generating content, summarizing data, or providing intelligent suggestions.
Overview
Code
Anatomy
- AI border
- AI icon
- AI gradient
The AI Button component inherits its functionality and guidelines from the core Occam Button.
Usage Guidelines
Use When
Using only for triggering AI-powered actions.
Best Practices
- Labeling clearly and action-oriented. (e.g., “Ask Copilot”, “Generate Summary”).
- Place buttons near related content.
Variants
primary
Button
Secondary
Button
Text
Button
Sizes
medium (36px)
Button
Button
Button
small (32px)
Button
Button
Button
eXTRA small (28px)
Button
Button
Button
Crafted with ❤️ at Zuora
© 2026 Zuora Inc.
On This Page
AI Button
AI button is a trigger element that initiates AI-powered actions, such as generating content, summarizing data, or providing intelligent suggestions.
Overview
Code
Anatomy
- AI border
- AI icon
- AI gradient
The AI Button component inherits its functionality and guidelines from the core Occam Button.
Usage Guidelines
Use When
Using only for triggering AI-powered actions.
Best Practices
- Labeling clearly and action-oriented. (e.g., “Ask Copilot”, “Generate Summary”).
- Place buttons near related content.
Variants
primary
Button
Secondary
Button
Text
Button
Sizes
medium (36px)
Button
Button
Button
small (32px)
Button
Button
Button
eXTRA small (28px)
Button
Button
Button
Crafted with ❤️ at Zuora
© 2026 Zuora Inc.