Skip to content

AI Button

Action – AI

The AI button is the entry point to AI / concierge features. At rest it is an icon-only circle carrying the ai-sparkle glyph; on hover, keyboard focus, or press it expands to reveal its label (“Hi, I’m Concierge”). The expansion is pure CSS — the label is always in the DOM, so it is also the button’s accessible name.

  • CSS

Maintained by Platform

Usable — may still change

DesignCSSAccessibility

The AI button is the entry point to AI / concierge features. At rest it is an icon-only circle carrying the ai-sparkle glyph; on hover, keyboard focus, or press it auto-expands to reveal its label. Reach for it only where an AI / assistant experience sits behind the click — for any other icon-only control, use Icon Button.

Anatomy

Section titled “Anatomy”

The anatomy below is shown in its expanded state so both parts are visible; at rest only the circular icon shows.

  1. AI button
  2. AI sparkle icon
  3. Label

When to use it

Section titled “When to use it”

Use the AI button when:

  • The click opens an AI / concierge / assistant experience and you want a compact, self-announcing entry point.
  • Space is tight at rest but the affordance should still say what it is once the user engages.

Avoid the AI button when:

  • The action isn’t AI-related — use Icon Button or a standard Button.
  • You need a persistent, always-visible label — use a standard Button with the ai-sparkle icon instead.
  • The control needs play / pause or media semantics — that’s Media Button.

Properties

Section titled “Properties”

Expand on interaction

At rest the button is a 40 × 40 circle with the glyph filling it. On hover, focus-visible, and active it expands horizontally to reveal the label in lg-button typography and the glyph steps down to 20 px. Keyboard focus expands it too, so the label is not hover-only.

Contrast

Two modes: Neutral for light surfaces and Contrast for dark ones. Each carries its own rested / hover / active fill and foreground from the buttons/ai-button token scale.

Brand shape

The expanded corner is brand-specific: Toyota expands to a sharp-cornered rectangle (radius-none), Lexus to a fully rounded pill (radius-xl). The rested circle is identical on both.

Lexus copper gradient

On Lexus the fill is a copper gradient — linear (left → right) at rest, sliding to radial (inside → outside) on hover — reusing the shared background-gradient tokens (--tng-color-background-gradient-*). Figma ships a flat copper placeholder because multi-brand variables can’t carry gradients. On active, Lexus drops to the flat primary (indigo) token.

Platform considerations

Section titled “Platform considerations”

Desktop

Hover is the primary reveal. Place the button where its expansion has room to grow inline without colliding with adjacent chrome.

Tablet

Same 40 px footprint. Focus and press both expand it, so the label is still reachable without a pointer.

Mobile

With no hover, the label reveals on press / focus. The 40 × 40 rested target clears the touch-target minimum, so the collapsed circle is safe to tap.

Best practices

Section titled “Best practices”

Do

Keep the label short so the expanded width stays manageable, reserve the button for genuine AI entry points, and leave room for it to expand inline.

Don't

Don’t use it as a generic icon button, don’t rely on hover as the only way to reach the label (focus and press expand it too), and don’t place it where the expansion would be clipped.

Content guidelines

Section titled “Content guidelines”

The label doubles as the accessible name, so make it a meaningful standalone announcement of the control’s purpose — the concierge greeting “Hi, I’m Concierge” identifies the assistant. Keep it to a few words; the button expands to fit, and long labels stretch it across the layout.