# Ai-button


# AI button

> This guide standardizes the creation of the AI button within each ATS, accommodating product-specific look and feel.

## AI button design overview

**Core design**: The AI button component is a simple button that triggers the AI generation process. Each ATS needs to skin their own button with the following core elements:
- **Gradient border**
- **Icon**

![·](ai-feature-pattern/ai_button.svg)

### Gradient border

The gradient border is a key visual element. It contians the following two colors:
- **#159EFD** (blue)
- **#A834FF** (purple)

The gradient should be a linear gradient that transitions from the top left to the bottom right.

![·](ai-feature-pattern/ai_button_gradient.svg)

### Icons

The second key visual element is the AI icon, which can be downloaded <a href="http://localhost:6007/?path=/docs/icons-all-icons--docs">here</a>. When the AI is processing, display a loading icon alongside the text "Generating...". Please use your ATS's existing loading icon to maintain consistency. If your ATS doesn't have a loading icon, you can download an alternative <a href="http://localhost:6007/?path=/docs/icons-all-icons--docs">here</a>.

![·](ai-feature-pattern/ai_icon.svg)
![·](ai-feature-pattern/ai_loader.svg)
![·](ai-feature-pattern/ai_button_generating.svg)

### Animation

To provide visual feedback when the AI is processing, consider animating the gradient border when the user clicks the AI button to generate content. This animation helps indicate that the AI is actively working. For inspiration, view an example of how this animation can be implemented:

<iframe src="https://theowoo.github.io/agbg/?shape=rectangle&width=705&height=225&borderWidth=10&borderRadius=10&gradientType=twoTones&hue=221&hueOffset=90&brightness=56&duration=2&hideControl=true
"

height="280"
width="800"
style={{border:"none"}}
scrolling="no"
title="description"></iframe>