MeDo

Generatore di Bottoni IA.

Descrivi il tuo brand e MeDo genera l'intero sistema di bottoni — varianti primary, secondary, ghost e destructive, tre dimensioni, più gli stati hover, focus, caricamento e disabilitato. Un prompt, un set coerente.

Bottone
Bottone

I bottoni costituiscono circa un quarto di ogni design system

Nessun componente viene usato più spesso. Ogni invio di form, ogni CTA, ogni dialogo di conferma passa da un bottone — ed è proprio per questo che qui l'incoerenza salta subito all'occhio. Dieci bottoni leggermente diversi in un prodotto trasmettono sciatteria molto prima che qualcuno riesca a spiegare perché. Generare l'intero set in una volta, da un'unica descrizione, fa sì che le varianti condividano scala di spaziatura, raggio e trattamento del focus per costruzione e non per disciplina.

6 modelli

Modelli di Bottone che puoi generare

Ogni modello è un prompt reale, non uno screenshot. Copialo in qualsiasi editor IA, oppure eseguilo in MeDo e ottieni codice React + Tailwind.

BasicVariant Set

Four Roles, Three Sizes

The set you generate first and edit for a year. Roles rather than colors, so a rebrand moves one token instead of forty class strings.

Create a reusable button component with four role-based variants: primary as a solid brand fill with white text, secondary as a white surface with a grey border, ghost as transparent with a tinted background on hover, and destructive as a solid red. Support sm at 32px tall, md at 40px and lg at 48px, plus a fullWidth prop. Wire hover, active, focus-visible, disabled and loading states for every variant, keeping the focus ring on focus-visible only so mouse clicks do not draw it. Render a real button element with an explicit type attribute, and drive all four variants from one shared spacing and radius scale rather than per-variant values.

Prova in MeDo
IconsIcon + Label

Leading and Trailing Icon Slots

Two slots, one gap token. Most icon bugs are spacing bugs — an icon glued to its label, or optically misaligned because the SVG box is taller than the cap height.

Extend a button component with optional leading and trailing icon slots. Size the icon to 16px at sm and md and 18px at lg, set a consistent 8px gap between icon and label, and add aria-hidden="true" to the icon so screen readers announce the label only. Flip the slot order automatically under a right-to-left direction. Use inline-flex with items-center so the icon aligns to the label cap height rather than the line box, and give the SVG shrink-0 so a long wrapping label cannot squash it. Accept any React node so a spinner or an avatar can occupy the same slot.

Prova in MeDo
LoadingAsync Submit

Loading Button With a Locked Width

A submit button that shrinks when the spinner replaces the label makes the whole form jump. Reserve the width and the click feels instant instead of broken.

Create a submit button with a loading prop. While loading, replace the label with a centered spinner but keep the button at its resting width by rendering the label at zero opacity underneath the spinner rather than removing it from the DOM. Set aria-busy="true" and aria-disabled="true", block repeat submissions, and keep the button focusable so a screen reader can still read the pending state. Respect prefers-reduced-motion by swapping the rotating spinner for a static pulsing dot. Add an optional loadingText prop that announces progress through a polite live region instead of changing the visible label.

Prova in MeDo
ToolbarIcon Only

Square Icon Button With a Tooltip

Dense toolbars need it, and it fails accessibility more often than any other button. No visible text means the accessible name has to come from somewhere explicit.

Create an icon-only button for a dense toolbar: a square target at 32px, 36px and 40px with the icon centered and no label. Require an ariaLabel prop and render it as aria-label on the button, since there is no visible text to name the control. Expand the hit area to at least 44px with a negative-margin pseudo-element so touch targets meet the minimum without widening the toolbar. Pair it with a tooltip that appears on hover and on keyboard focus, referenced with aria-describedby so the tooltip supplements the label rather than replacing it. Include a pressed state driven by aria-pressed for toggle uses.

Prova in MeDo
GroupSplit Action

Split Button With a Menu Half

One default action plus a menu of alternates — Save and Save as, Deploy and Deploy to staging. Two buttons that must look like one and stay independently reachable.

Create a split button: a primary action on the left and a narrow chevron trigger on the right, joined into one visual unit with a 1px divider, the outer corners rounded and the inner corners square. Render them as two separate button elements so each keeps its own accessible name, giving the chevron a label such as "More save options". Wire the chevron to a menu with aria-haspopup="menu" and aria-expanded, opening on click and on ArrowDown, closing on Escape with focus returned to the trigger. Keep the focus ring visible on each half by drawing it outside the shared border rather than inside it.

Prova in MeDo
PolymorphicLink as Button

Anchor With Button Styling

A styled div with an onClick is not a button and a button that navigates is not a link. One asChild prop keeps the styling while the correct element still ships.

Create a polymorphic button that accepts an asChild prop and forwards its variant, size and state classes onto a child element, so a Next.js Link or a plain anchor can carry button styling without nesting an interactive element inside a button. Forward the ref, merge className rather than overwriting it, and skip the type attribute when the rendered element is not a button. When the target is an anchor, omit the disabled attribute — which anchors ignore — and instead drop href and set aria-disabled with pointer-events none. Add an external variant that appends rel="noopener noreferrer" and a visually hidden "opens in a new tab" note.

Prova in MeDo

Come personalizzare il tuo Bottone

Definisci le varianti, non solo i colori

Chiedi le varianti per ruolo — primary, secondary, ghost, destructive — anziché per colore. La denominazione per ruolo sopravvive a un rebrand: se cambia il colore del brand, "primary" significa ancora la stessa cosa e va spostato un solo token.

Specifica esplicitamente lo stato di caricamento

Indica che lo spinner deve sostituire l'etichetta preservando la larghezza del bottone. Altrimenti i bottoni si restringono a metà invio e il layout circostante salta — uno dei difetti di finitura più comuni nelle UI generate.

Chiedi focus-visible, non focus

Un anello su :focus scatta anche con i clic del mouse e sembra un bug. Richiedi :focus-visible così l'anello appare solo per chi usa tastiera e tecnologie assistive, che è ciò che verificano davvero gli audit di accessibilità.

Fissa la semantica del disabilitato

Decidi se i bottoni disabilitati devono usare l'attributo disabled o aria-disabled. L'attributo blocca tutti gli eventi, incluso il focus; aria-disabled mantiene il bottone focalizzabile così gli screen reader possono annunciare perché non è disponibile. Di' quale preferisci.

Chi usa il componente Bottone

Prodotto SaaS

Un bottone primary per la CTA della prova, secondary per "Prenota una demo", ghost per i link terziari dentro le card e destructive per l'eliminazione dell'account — tutti con lo stesso raggio e anello di focus, così l'interfaccia si legge come un unico prodotto.

Negozio e-commerce

Un bottone "Aggiungi al carrello" ad alto contrasto con stato di caricamento durante la verifica delle scorte, più una variante secondary più discreta "Salva per dopo" che non gli ruba attenzione.

Dashboard o strumento di amministrazione

Le toolbar dense richiedono bottoni piccoli solo icona con etichette accessibili accanto a bottoni di azione di dimensione standard. Una scala da sm a lg mantiene la toolbar compatta senza inventare stili una tantum.

Landing page di marketing

Un unico bottone primary sovradimensionato above the fold, ripetuto a fondo pagina, con una variante ghost per il link secondario "Scopri come funziona" che fa scorrere anziché convertire.

Pattern di Bottone per siti web diversi

Lo stesso componente bottone, calibrato sul tipo di sito su cui viene pubblicato.

01 / 06

SaaS Product Buttons

One primary per screen is the rule that keeps a product feeling directed. Everything else drops to secondary or ghost, and destructive stays reserved for irreversible actions so a red button always means the same thing. The moment two primaries appear in one view, users start reading the layout instead of acting on it.

Stili e varianti di Bottone

Scegli la variante che si adatta al resto della pagina, poi generala.

01 / 06

Solid Button

A filled surface with white or near-white text, carrying the highest visual weight on the page. Check the contrast against the fill rather than the page background, and remember that a lightened hover state can quietly drop a passing 4.5:1 pairing below the line.

Bottone in React, Next.js, Vue e Svelte

React, Next.js, Vue 3, SvelteKit, Astro o HTML puro: lo stesso bottone, sei modi per integrarlo.

01 / 06

React Button

Derive the class string from variant and size lookups instead of chained ternaries, and forward the ref so tooltips and popovers can anchor to the element. Spread the remaining props last so a caller can still pass type or aria attributes through.

src/components/Button.tsx

export const Button = forwardRef(function Button(
  { variant = 'primary', size = 'md', loading, ...props },
  ref
) {
  return (
    <button
      ref={ref}
      type="button"
      aria-busy={loading}
      className={cn(base, variants[variant], sizes[size])}
      {...props}
    />
  )
})

Come aggiungere il tuo Bottone a un progetto

Quattro passaggi, dalla scelta di un modello di bottone alla messa in produzione.

01~30s

Pick a Button Template

Scan the six templates and start from the closest surface — the full variant set for a design system, the async submit for a form, the icon-only for a toolbar.

02~10s

Copy the Prompt

Take the prompt into MeDo, Lovable, Bolt, v0 or Cursor. Swap in your brand color, radius and font before you run it, since those three values are what every variant inherits.

03~1min

Generate and Refine

You get React + Tailwind back with a live preview. Follow up in plain English — "add an xs size", "make the disabled state use aria-disabled" — rather than hand-editing the class lookups.

04~2min

Replace Your Ad-Hoc Buttons

Import one Button and delete the one-off styles it supersedes. The value is in the variants sharing a spacing scale and focus ring by construction, which only holds if nothing else on the page is styling its own button.

Domande comuni su Bottone

Come genero un componente bottone con l'IA?

Descrivi in un solo prompt varianti, dimensioni e stati che ti servono — per esempio "varianti primary, secondary e ghost in tre dimensioni con stati hover, disabled e loading" — e MeDo genera il componente completo con tutte le combinazioni collegate. Ottieni un file che copre l'intero set anziché un singolo bottone fisso.

Quali varianti di bottone deve avere un design system?

La maggior parte dei prodotti ne richiede quattro: primary per l'azione più importante di una schermata, secondary per le azioni di supporto, ghost o terziaria per le azioni a bassa enfasi in UI dense e destructive per tutto ciò che è irreversibile. Aggiungere più varianti di solito segnala un problema di gerarchia più che uno stile mancante.

L'IA può generare bottoni accessibili?

Sì. MeDo renderizza veri elementi button con attributo type esplicito, anelli focus-visible, nomi accessibili per i bottoni solo icona e stati disabilitati annunciati correttamente dagli screen reader. Menziona l'accessibilità nel prompt e aggiungerà anche aria-busy durante il caricamento.

Come aggiungo uno stato di caricamento a un bottone?

Chiedi una prop loading che sostituisca l'etichetta con uno spinner mantenendo fissa la larghezza del bottone, disabiliti l'interazione e imposti aria-busy così le tecnologie assistive annunciano lo stato in attesa. Fissare la larghezza è la parte che si dimentica — senza di essa la pagina si ridispone a ogni clic.

Un bottone deve essere un button o un link?

Se naviga, deve essere un anchor; se esegue un'azione, deve essere un button. Di' a MeDo quale comportamento vuoi e renderizzerà l'elemento corretto, con una via d'uscita in stile asChild quando ti serve lo stile bottone su un link di routing.

Posso generare bottoni in linea con il mio brand esistente?

Sì. Indica nel prompt il colore del brand, il raggio degli angoli, il font e qualsiasi scala di spaziatura esistente, e le varianti generate li useranno in modo coerente. Puoi anche incollare un bottone già presente nel tuo codice e chiedere a MeDo di estenderlo a un set completo di varianti.

Crea il tuo bottone adesso.

Prova qualsiasi prompt — gratis, nessuna registrazione richiesta.

Inizia a costruire gratisVedi i prezzi
Input

Input

Descrivi il tuo form e MeDo genera insieme input di testo e textarea — label, testo di aiuto, stati di errore, affissi prefisso e suffisso, contatori di caratteri e ridimensionamento automatico, tutto collegato ai giusti attributi di accessibilità.

Componenti correlati
Card

Card

Descrivi cosa contiene la card e MeDo genera il contenitore completo — slot media, header, body e footer, elevazione in hover, immagini bloccate con aspect-ratio, altezze uguali in griglia e uno stato skeleton coordinato.

Componenti correlati
Modale

Modale

Descrivi il dialogo che ti serve e MeDo genera tutto — intestazione, corpo scorrevole e footer con le azioni, più cattura del focus, ripristino del focus alla chiusura, blocco dello scroll del body e una variante bottom sheet per mobile.

Componenti correlati