Pulsanti

Un elenco di pulsanti e gruppi di pulsanti utilizzati nell’app.

Pulsante

Utilizzo
Proprietà

import { Button } from "@/ui/input/button/components/Button";

export const MyComponent = () => {
  return (
    <Button
      className
      Icon={null}
      title="Title"
      fullWidth={false}
      variant="primary"
      size="medium"
      position="standalone"
      accent="default"
      soon={false}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};

Proprietà	Tipo	Descrizione
nomeClasse	stringa	Nome della classe opzionale per stile aggiuntivo
Icona	`React.ComponentType`	Un componente icona opzionale mostrato all’interno del pulsante
titolo	stringa	Il contenuto testuale del pulsante
larghezzaCompleta	booleano	Definisce se il pulsante deve occupare l’intera larghezza del suo contenitore
variante	stringa	La variante di stile visivo del pulsante. Le opzioni includono `primary`, `secondary` e `tertiary`.
dimensione	stringa	La dimensione del pulsante. Ha due opzioni: `small` e `medium`.
posizione	stringa	La posizione del pulsante rispetto ai suoi fratelli. Le opzioni includono: `standalone`, `left`, `right` e `middle`.
accento	stringa	Il colore di accentuazione del pulsante. Le opzioni includono: `default`, `blue` e `danger`.
presto	booleano	Indica se il pulsante è segnato come “presto” (ad esempio per funzionalità imminenti)
disabilitato	booleano	Specifica se il pulsante è disabilitato o meno
focus	booleano	Determina se il pulsante è messo a fuoco
onClick	funzione	Una funzione callback che si attiva quando l’utente clicca sul pulsante

Gruppo di Pulsanti

Utilizzo
Proprietà

import { Button } from "@/ui/input/button/components/Button";
import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";

export const MyComponent = () => {
  return (
    <ButtonGroup variant="primary" size="large" accent="blue" className>
      <Button
        className
        Icon={null}
        title="Button 1"
        fullWidth={false}
        variant="primary"
        size="medium"
        position="standalone"
        accent="blue"
        soon={false}
        disabled={false}
        focus={false}
        onClick={() => console.log("click")}
      />
      <Button
        className
        Icon={null}
        title="Button 2"
        fullWidth={false}
        variant="secondary"
        size="medium"
        position="left"
        accent="blue"
        soon={false}
        disabled={false}
        focus={false}
        onClick={() => console.log("click")}
      />
      <Button
        className
        Icon={null}
        title="Button 3"
        fullWidth={false}
        variant="tertiary"
        size="medium"
        position="right"
        accent="blue"
        soon={false}
        disabled={false}
        focus={false}
        onClick={() => console.log("click")}
      />
    </ButtonGroup>
  );
};

Proprietà	Tipo	Descrizione
variante	stringa	La variante di stile visivo dei pulsanti all’interno del gruppo. Le opzioni includono `primary`, `secondary` e `tertiary`.
dimensione	stringa	Le dimensioni dei pulsanti all’interno del gruppo. Ha due opzioni: `medium` e `small`.
accento	stringa	Il colore di accentuazione dei pulsanti all’interno del gruppo. Le opzioni includono `default`, `blue` e `danger`.
nomeClasse	stringa	Nome della classe opzionale per stile aggiuntivo
figli	ReactNode	Un array di elementi React che rappresentano i singoli pulsanti all’interno del gruppo

Pulsante Galleggiante

Utilizzo
Proprietà

import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButton
      className
      Icon={IconSearch}
      title="Title"
      size="medium"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={true}
    />
  );
};

Proprietà	Tipo	Descrizione
nomeClasse	stringa	Nome opzionale per stile aggiuntivo
Icona	`React.ComponentType`	Un componente icona opzionale mostrato all’interno del pulsante
titolo	stringa	Il contenuto testuale del pulsante
dimensione	stringa	La dimensione del pulsante. Ha due opzioni: `small` e `medium`.
posizione	stringa	La posizione del pulsante rispetto ai suoi fratelli. Le opzioni includono: `standalone`, `left`, `middle` e `right`.
applicaOmbra	booleano	Determina se applicare l’ombra a un pulsante
applicaBlur	booleano	Determina se applicare un effetto blur al pulsante
disabilitato	booleano	Determina se il pulsante è disabilitato
focus	booleano	Indica se il pulsante è messo a fuoco

Gruppo di Pulsanti Galleggianti

Utilizzo
Proprietà

import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButtonGroup size="small">
      <FloatingButton
        className
        Icon={IconClipboardText}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
        focus={true}
      />
      <FloatingButton
        className
        Icon={IconCheckbox}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
      />
    </FloatingButtonGroup>
  );
};

Proprietà	Tipo	Descrizione	Predefinito
dimensione	stringa	La dimensione del pulsante. Ha due opzioni: `small` e `medium`.	piccolo
figli	ReactNode	Un array di elementi React che rappresentano i singoli pulsanti all’interno del gruppo

Pulsante Icona Galleggiante

Utilizzo
Props

import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingIconButton
      className
      Icon={IconSearch}
      size="small"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={false}
      onClick={() => console.log("click")}
      isActive={true}
    />
  );
};

Props	Tipo	Descrizione
nomeClasse	stringa	Nome opzionale per stile aggiuntivo
Icona	`React.ComponentType`	Un componente icona opzionale mostrato all’interno del pulsante
dimensione	stringa	La dimensione del pulsante. Ha due opzioni: `small` e `medium`.
posizione	stringa	La posizione del pulsante rispetto ai suoi fratelli. Le opzioni includono: `standalone`, `left`, `right`, e `middle`.
applicaOmbra	booleano	Determina se applicare l’ombra a un pulsante
applicaBlur	booleano	Determina se applicare un effetto blur al pulsante
disabilitato	booleano	Determina se il pulsante è disabilitato
focus	booleano	Indica se il pulsante ha il focus
onClick	funzione	Una funzione callback che si attiva quando l’utente clicca sul pulsante
èAttivo	booleano	Determina se il pulsante è in uno stato attivo

Gruppo di Pulsanti Icona Galleggianti

Utilizzo
Proprietà

import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  const iconButtons = [
    {
      Icon: IconClipboardText,
      onClick: () => console.log("Button 1 clicked"),
      isActive: true,
    },
    {
      Icon: IconCheckbox,
      onClick: () => console.log("Button 2 clicked"),
      isActive: true,
    },
  ];

  return (
    <FloatingIconButtonGroup
    className
    size="small"
    iconButtons={iconButtons} />
  );
};

Proprietà	Tipo	Descrizione
nomeClasse	stringa	Nome opzionale per stile aggiuntivo
dimensione	stringa	La dimensione del pulsante. Ha due opzioni: `small` e `medium`.
iconButtons	array	Un array di oggetti, ciascuno rappresentante un pulsante icona nel gruppo. Ogni oggetto dovrebbe includere il componente icona che si vuole visualizzare nel pulsante, la funzione che si vuole chiamare quando un utente clicca sul pulsante e se il pulsante dovrebbe essere attivo o meno.

Pulsante Leggero

Utilizzo
Props

import { LightButton } from "@/ui/input/button/components/LightButton";

export const MyComponent = () => {
  return <LightButton
  className
  icon={null}
  title="Title"
  accent="secondary"
  active={false}
  disabled={false}
  focus={true}
  onClick={()=>console.log('click')}
  />;
};

Props	Tipo	Descrizione
nomeClasse	stringa	Nome opzionale per stile aggiuntivo
icona	`React.ReactNode`	L’icona che si vuole visualizzare nel pulsante
titolo	string	Il contenuto testuale del pulsante
accento	string	Il colore di accentuazione del pulsante. Le opzioni includono: `secondary` e `tertiary`.
attivo	booleano	Determina se il pulsante è in uno stato attivo
disabilitato	booleano	Determina se il pulsante è disabilitato
focus	booleano	Indica se il pulsante è messo a fuoco
onClick	funzione	Una funzione callback che si attiva quando l’utente clicca sul pulsante

Pulsante Icona Leggera

Utilizzo
Props

import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <LightIconButton
      className
      testId="test1"
      Icon={IconSearch}
      title="Title"
      size="small"
      accent="secondary"
      active={true}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};

Props	Tipo	Descrizione
nomeClasse	stringa	Nome opzionale per stile aggiuntivo
testId	string	Identificatore di prova per il pulsante
Icona	`React.ComponentType`	Un componente icona opzionale visualizzato all’interno del pulsante
titolo	string	Il contenuto di testo del pulsante
dimensione	string	La dimensione del pulsante. Ha due opzioni: `small` e `medium`.
accento	string	Il colore accentato del pulsante. Le opzioni includono: `secondary` e `tertiary`.
attivo	booleano	Determina se il pulsante si trova in uno stato attivo
disabilitato	booleano	Determina se il pulsante è disabilitato
focus	booleano	Indica se il pulsante ha il focus
onClick	funzione	Una funzione di callback che si attiva quando l’utente fa clic sul pulsante

Pulsante principale

Utilizzo
Proprietà

import { MainButton } from "@/ui/input/button/components/MainButton";
import { IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <MainButton
      title="Checkbox"
      fullWidth={false}
      variant="primary"
      soon={false}
      Icon={IconCheckbox}
    />
  );
};

Proprietà	Tipo	Descrizione
titolo	string	Il contenuto di testo del pulsante
larghezzaCompleta	booleano	Definisce se il pulsante dovrebbe estendersi per tutta la larghezza del suo contenitore
variante	string	La variante dello stile visivo del pulsante. Le opzioni includono `primary` e `secondary`
presto	booleano	Indica se il pulsante è contrassegnato come “presto” (ad esempio per funzionalità in arrivo)
Icona	`React.ComponentType`	Un componente icona opzionale visualizzato all’interno del pulsante
Proprietà del `button` di React	`React.ComponentProps<'button'>`	Sono supportate tutte le proprietà standard del pulsante HTML

Pulsante icona rotondo

Utilizzo
Props

import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <RoundedIconButton
      Icon={IconSearch}
    />
  );
};

Props	Tipo	Descrizione
Icona	`React.ComponentType`
Proprietà del `button` di React	`React.ButtonHTMLAttributes<HTMLButtonElement>`

Welcome

Core Concepts

Pulsante

Gruppo di Pulsanti

Pulsante Galleggiante

Gruppo di Pulsanti Galleggianti

Pulsante Icona Galleggiante

Gruppo di Pulsanti Icona Galleggianti

Pulsante Leggero

Pulsante Icona Leggera

Pulsante principale

Pulsante icona rotondo

​Pulsante

​Gruppo di Pulsanti

​Pulsante Galleggiante

​Gruppo di Pulsanti Galleggianti

​Pulsante Icona Galleggiante

​Gruppo di Pulsanti Icona Galleggianti

​Pulsante Leggero

​Pulsante Icona Leggera

​Pulsante principale

​Pulsante icona rotondo

Pulsante

Gruppo di Pulsanti

Pulsante Galleggiante

Gruppo di Pulsanti Galleggianti

Pulsante Icona Galleggiante

Gruppo di Pulsanti Icona Galleggianti

Pulsante Leggero

Pulsante Icona Leggera

Pulsante principale

Pulsante icona rotondo