Suggestion

Offers a proposed next move the reader can take, such as a follow-up prompt or a task lane.

Configurations

Supported configurations for this component.

DefaultWith iconSelected

States

Interaction states covered by the API and the style contract.

HoverFocus visibleDisabled

Configurations

3 examples
Default
sm
md
With icon
sm
md
Selected
sm
md

States

3 examples
Hover
Rest
Hover
Focus visible
Rest
Focus visible
Disabled

Add to your project

One command adds this component to your project.

1

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Props

Every prop this component accepts. Any other prop is forwarded to the underlying element.

PropTypeDefaultDescription
childrenreqReact.ReactNode-The suggestion's label.
iconReact.ComponentType-Phosphor icon before the label, on the rung's size.
size'sm'|'md''sm'Control rung: 28 / 32px tall, 12 / 14px label, 16 / 18px glyph.
selectedboolean-Taken: the dashed frame turns solid with the selection border and tint. Passed (true or false), it sets aria-pressed and the suggestion is a toggle, a lane that can be taken; left unset, there is no aria-pressed and it is a plain button, a one-shot follow-up.
onClick() => void-Handler called when the element is clicked.
classNamestring-Additional CSS classes applied to the root element.
styleReact.CSSProperties-Inline styles applied to the root element.

More Andromeda Pro components

Alert

Displays a status message in the flow of the page, at a severity from note to fault.

4 variants

Artifact

Frames something an agent produced, such as a table or a chart, under a title bar with its actions.

3 variants

Avatar

Represents a person as a square image tile that falls back to their initials.

6 variants1 states