Shadcn Button More Less Toggle

Ghost button with more/less toggle. Built with the Button component. A free, open source shadcn button example you can install with npx shadcn@latest add @reui/c-button-35 and edit as your own code.

Ghost button with more/less toggle

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

Best for: A ghost Show more control whose label and chevron flip between more and less on each click

When to use

Page, form and dialog actions in primary, secondary, outline, ghost, destructive and link weights
Icon only controls and sign in rows, such as close, search, copy, menu or theme switches and provider logos
Actions that report state or carry extras, such as a spinner, a saved check, a count or a shortcut

When not to use

Extra content that the same click must reveal and hide below it: use the Collapsible component
Several related actions joined edge to edge as one segmented control: use the Button Group component
A control that stays pressed on or off, such as bold in an editor toolbar: use the Toggle component
An action attached inside a text field, such as a search submit or a clear: use the Input Group component

Agent notes

isExpanded only swaps the label and chevron; connect it to the content it reveals and expose it as aria-expanded
The base twin Button defaults to type button, so pass type submit inside a form; the radix twin renders a plain button that submits by default
A link needs its anchor passed through render with nativeButton false on the base twin, or wrapped with asChild on the radix twin
Set data-icon to inline-start or inline-end on a leading or trailing icon so the text sizes trim the padding on that side

Markdownhttps://reui.io/components/button/c-button-35.md

MCPget_example("c-button-35")

Installnpx shadcn@latest add @reui/c-button-35

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Button More Less Toggle

Button

About Shadcn Button More Less Toggle

Ghost button with more/less toggle. Built with the Button component. A free, open source shadcn button example you can install with npx shadcn@latest add @reui/c-button-35 and edit as your own code.

What You Can Build With Shadcn Button More Less Toggle

Composes Button, so it drops into any project already using those components.
Install it with the shadcn CLI: npx shadcn@latest add @reui/c-button-35
Open source and free, with the full source on this page to copy or adapt.

More Shadcn Button Examples

Default Default button
Secondary Secondary button
Outline Outline button
Ghost Ghost button
Destructive Destructive button
Link Link button variant
Extra Small Extra small button
Small Small button
Large Large button
Disabled Disabled button
Icon Button Icon button
Icon Right Button with an icon on the right

Related Shadcn Component Categories

Button Group
Open-source shadcn button group components for segmented controls, toolbar actions, and view switchers.
Calendar
Open-source shadcn calendar components for date picking, scheduling flows, and booking interfaces.
Card
Open-source shadcn card components for content previews, dashboard widgets, and product summaries.
Carousel
Open-source shadcn carousel components for image galleries, feature showcases, and testimonials.
Cascader
Nested multi-level selection with drill-down navigation, breadcrumbs, search and custom rows.
Chart
Open-source shadcn chart components for analytics dashboards, KPI tracking, and reports.

Frequently Asked Questions

When should I use Shadcn Button More Less Toggle?

Use it for a ghost Show more control whose label and chevron flip between more and less on each click.

Shadcn Button as a whole fits:

Page, form and dialog actions in primary, secondary, outline, ghost, destructive and link weights
Icon only controls and sign in rows, such as close, search, copy, menu or theme switches and provider logos
Actions that report state or carry extras, such as a spinner, a saved check, a count or a shortcut

For extra content that the same click must reveal and hide below it, use the Collapsible component. For several related actions joined edge to edge as one segmented control, use the Button Group component. For a control that stays pressed on or off, such as bold in an editor toolbar, use the Toggle component. For an action attached inside a text field, such as a search submit or a clear, use the Input Group component.

How do I install Shadcn Button More Less Toggle?

Run npx shadcn@latest add @reui/c-button-35. The CLI copies the source into your project, so you own the code and can edit it freely.

Is Shadcn Button More Less Toggle free to use?

Yes. Every ReUI component example is open source and free for personal and commercial projects.

Which components does Shadcn Button More Less Toggle use?

It composes Button. The shadcn CLI installs those alongside the example.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.