Button — Atelier

Demo

Live PreviewReact

jsx

<LlmButton variant="primary">Primary</LlmButton>
<LlmButton variant="secondary">Secondary</LlmButton>
<LlmButton variant="outline">Outline</LlmButton>
<LlmButton loading={true}>Loading</LlmButton>
<LlmButton disabled={true}>Disabled</LlmButton>

API (Angular)

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'outline' \| 'danger'`	`'primary'`	Visual style variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the button
`disabled`	`boolean`	`false`	Disables the button
`loading`	`boolean`	`false`	Shows a loading spinner, disables interaction
`aria-label`	`string`	`—`	Accessible name. Required for icon-only buttons (no children). React enforces this at compile time via a discriminated union; Angular/Vue warn at runtime in dev mode.

Import

import { LlmButton } from '@atelier-ui/angular';

Explore in Storybook

Prototyping with AI

Best practices

Always specify the "variant" to communicate the visual intent to the model.
Use the "loading" state instead of custom spinner implementations for consistency.
Specify the button "size" to ensure correct alignment in complex layouts.

Common hallucinations

AI may use standard HTML "button" instead of "LlmButton".
AI may try to use "ghost" or "text" variants which are not yet supported.

Example prompt

Create a primary LlmButton that says "Submit Form" and shows a loading state.