← All proposals

Agentic Button

A separate component, `AgenticButton`, for an action the agent does:

Net-new componentOpen in Storybook

proposals/AgenticButton/AgenticButton.mdx28 lines · View on GitHub
import { Canvas, Controls, Meta, Title } from '@storybook/addon-docs/blocks';

import * as AgenticButtonStories from './AgenticButton.stories';

<Meta of={AgenticButtonStories} name='Usage' />

<Title />

## Purpose

A button for an action the agent does. It is the secondary Button look with the AI gradient as its border, and a gradient working spinner.

## Usage

- It is a separate component, not a variant or a prop of the Button. It takes every Button prop except `variant`: `label`, `size`, `displayType`, `iconName`, `isLoading`, `isWorking`, `disableWhenWorking`, `isFullWidth`, `tally`, `statusDot`, `tooltipText`, `disabled` and the rest.
- The look is always the secondary treatment: the surface fill with the gradient border. There is no primary (dark) version.
- `isAnimated` shimmers the border. It stops for reduced motion.
- Use it for the call to action of an agent's suggestion, or the trigger of a menu of agent actions. Use the regular Button for everything else.

## Implementation

See the table below for the available props.

<hr />

<Canvas of={AgenticButtonStories.Default} />
<Controls of={AgenticButtonStories.Default} />