---
title: Firefox OS UX building blocks
slug: Archive/B2G_OS/UX/Building_blocks
translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x
---
<p>Qui troverai le specifiche e le descrizioni degli elementi per l'interfaccia delle app di Firefox OS insieme ad esempi e modelli di come dovrebbero apparire e funzionare.</p>

<table class="withoutBorder">
 <tbody>
  <tr>
   <td colspan="2">
    <h2 id="Menu_delle_azioni">Menu delle azioni</h2>
   </td>
  </tr>
  <tr>
   <td style="vertical-align: top; width: 180px;">
    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4635/action-menu.png" style="height: 240px; width: 160px;"><br>
      <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu">Dettagli</a><br>
     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding">Esempi e guide</a></p>
   </td>
   <td style="vertical-align: top;">
    <p> </p>
   </td>
  </tr>
  <tr>
   <td colspan="2" style="vertical-align: top;">
    <h2 id="Bottoni">Bottoni</h2>
   </td>
  </tr>
  <tr>
   <td style="vertical-align: top;">
    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4639/secondary-buttons.png" style="height: 139px; width: 140px;"></p>

    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button">Dettagli</a><br>
     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding">Esempi e guide</a></p>
   </td>
   <td style="vertical-align: top;">
    <p> </p>
   </td>
  </tr>
  <tr>
   <td colspan="2" style="vertical-align: top;">
    <h2 id="Conferme">Conferme</h2>
   </td>
  </tr>
  <tr>
   <td style="vertical-align: top;">
    <p><img alt="" src="https://mdn.mozillademos.org/files/4803/confirmation-example.png" style="height: 240px; width: 160px;"></p>

    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Confirmation">Dettagli</a><br>
     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Confirmation/Coding">Esempi e guide</a></p>
   </td>
   <td style="vertical-align: top;">
    <p> </p>
   </td>
  </tr>
  <tr>
   <td colspan="2" style="vertical-align: top;">
    <h2 id="Filtri">Filtri</h2>
   </td>
  </tr>
  <tr>
   <td style="vertical-align: top;">
    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4825/filter-visual-bottom" style="height: 241px; width: 161px;"></p>

    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Filter">Dettagli</a><br>
     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Filter/Coding">Esempi e guide</a></p>
   </td>
   <td style="vertical-align: top;">
    <p> </p>
   </td>
  </tr>
  <tr>
   <td colspan="2" style="vertical-align: top;">
    <h2 id="Titoli">Titoli</h2>
   </td>
  </tr>
  <tr>
   <td style="vertical-align: top;">
    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4845/header-default.png" style="height: 27px; width: 160px;"></p>

    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Header">Dettagli</a><br>
     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Header/Coding">Esempi e guide</a></p>
   </td>
   <td style="vertical-align: top;">
    <p> </p>
   </td>
  </tr>
  <tr>
   <td colspan="2" style="vertical-align: top;">
    <h2 id="Aree_di_input">Aree di input</h2>
   </td>
  </tr>
  <tr>
   <td style="vertical-align: top;">
    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4859/sample-sms-bottom-input.png" style="height: 241px; width: 161px;"></p>

    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Input_area">Dettagli</a><br>
     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Input_area/Coding">Esempi e guide</a></p>
   </td>
   <td style="vertical-align: top;">
    <p> </p>
   </td>
  </tr>
  <tr>
   <td colspan="2" style="vertical-align: top;">
    <h2 id="Liste">Liste</h2>
   </td>
  </tr>
  <tr>
   <td style="vertical-align: top;">
    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4889/list-example" style="height: 119px; width: 160px;"></p>

    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/List">Dettagli</a><br>
     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/List/Coding">Esempi e guide</a></p>
   </td>
   <td style="vertical-align: top;">
    <p> </p>
   </td>
  </tr>
  <tr>
   <td colspan="2" style="vertical-align: top;">
    <h2 id="Menu_a_oggetti">Menu a oggetti</h2>
   </td>
  </tr>
  <tr>
   <td style="vertical-align: top;">
    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4891/object-menu-idle.png" style="height: 240px; width: 160px;"></p>

    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Object_menu">Dettagli</a><br>
     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding">Esempi e guide</a></p>
   </td>
   <td style="vertical-align: top;">
    <p> </p>
   </td>
  </tr>
  <tr>
   <td colspan="2" style="vertical-align: top;">
    <h2 id="Indicatori_di_attività_e_barre_di_progresso">Indicatori di attività e barre di progresso</h2>
   </td>
  </tr>
  <tr>
   <td style="vertical-align: top;">
    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4897/progress-bar-example.png" style="height: 240px; width: 160px;"></p>

    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Progress_and_activity">Dettagli</a><br>
     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Progress_and_activity/Coding">Esempi e guide</a></p>
   </td>
   <td style="vertical-align: top;">
    <p> </p>
   </td>
  </tr>
  <tr>
   <td colspan="2" style="vertical-align: top;">
    <h2 id="Scrolling">Scrolling</h2>
   </td>
  </tr>
  <tr>
   <td style="vertical-align: top;">
    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4917/scrolling-index-scroll-dark.png" style="height: 240px; width: 160px;"></p>

    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Scrolling">Dettagli</a><br>
     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Scrolling/Coding">Esempi e guide</a></p>
   </td>
   <td style="vertical-align: top;">
    <p> </p>
   </td>
  </tr>
  <tr>
   <td colspan="2" style="vertical-align: top;">
    <h2 id="Seek_bar">Seek bar</h2>
   </td>
  </tr>
  <tr>
   <td style="vertical-align: top;">
    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4923/seekbar-sample.png" style="height: 240px; width: 160px;"></p>

    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Seek_bar">Dettagli</a><br>
     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Seek_bar/Coding">Esempi e guide</a></p>
   </td>
   <td style="vertical-align: top;">
    <p> </p>
   </td>
  </tr>
  <tr>
   <td colspan="2">
    <p>Qui troverai le specifiche e le descrizioni degli elementi per l'interfaccia delle app di Firefox OS insieme ad esempi e modelli di come dovrebbero apparire e funzionare.</p>

    <table class="withoutBorder">
     <tbody>
      <tr>
       <td colspan="2">
        <h2 id="Menu_delle_azioni_2">Menu delle azioni</h2>
       </td>
      </tr>
      <tr>
       <td style="vertical-align: top; width: 180px;">
        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4635/action-menu.png" style="height: 240px; width: 160px;"><br>
          <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu">Dettagli</a><br>
         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding">Esempi e guide</a></p>
       </td>
       <td style="vertical-align: top;">
        <p> </p>
       </td>
      </tr>
      <tr>
       <td colspan="2" style="vertical-align: top;">
        <h2 id="Button">Button</h2>
       </td>
      </tr>
      <tr>
       <td style="vertical-align: top;">
        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4639/secondary-buttons.png" style="height: 139px; width: 140px;"></p>

        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button">Dettagli</a><br>
         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding">Esempi e guide</a></p>
       </td>
       <td style="vertical-align: top;">
        <p> </p>
       </td>
      </tr>
      <tr>
       <td colspan="2" style="vertical-align: top;">
        <h2 id="Conferme_2">Conferme</h2>
       </td>
      </tr>
      <tr>
       <td style="vertical-align: top;">
        <p><img alt="" src="https://mdn.mozillademos.org/files/4803/confirmation-example.png" style="height: 240px; width: 160px;"></p>

        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Confirmation">Dettagli</a><br>
         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Confirmation/Coding">Esempi e guide</a></p>
       </td>
       <td style="vertical-align: top;">
        <p> </p>
       </td>
      </tr>
      <tr>
       <td colspan="2" style="vertical-align: top;">
        <h2 id="Filtri_2">Filtri</h2>
       </td>
      </tr>
      <tr>
       <td style="vertical-align: top;">
        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4825/filter-visual-bottom" style="height: 241px; width: 161px;"></p>

        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Filter">Dettagli</a><br>
         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Filter/Coding">Esempi e guide</a></p>
       </td>
       <td style="vertical-align: top;">
        <p> </p>
       </td>
      </tr>
      <tr>
       <td colspan="2" style="vertical-align: top;">
        <h2 id="Titoli_2">Titoli</h2>
       </td>
      </tr>
      <tr>
       <td style="vertical-align: top;">
        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4845/header-default.png" style="height: 27px; width: 160px;"></p>

        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Header">Dettagli</a><br>
         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Header/Coding">Esempi e guide</a></p>
       </td>
       <td style="vertical-align: top;">
        <p> </p>
       </td>
      </tr>
      <tr>
       <td colspan="2" style="vertical-align: top;">
        <h2 id="Aree_di_input_2">Aree di input</h2>
       </td>
      </tr>
      <tr>
       <td style="vertical-align: top;">
        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4859/sample-sms-bottom-input.png" style="height: 241px; width: 161px;"></p>

        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Input_area">Dettagli</a><br>
         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Input_area/Coding">Esempi e guide</a></p>
       </td>
       <td style="vertical-align: top;">
        <p> </p>
       </td>
      </tr>
      <tr>
       <td colspan="2" style="vertical-align: top;">
        <h2 id="Liste_2">Liste</h2>
       </td>
      </tr>
      <tr>
       <td style="vertical-align: top;">
        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4889/list-example" style="height: 119px; width: 160px;"></p>

        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/List">Dettagli</a><br>
         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/List/Coding">Esempi e guide</a></p>
       </td>
       <td style="vertical-align: top;">
        <p> </p>
       </td>
      </tr>
      <tr>
       <td colspan="2" style="vertical-align: top;">
        <h2 id="Menu_a_oggetti_2">Menu a oggetti</h2>
       </td>
      </tr>
      <tr>
       <td style="vertical-align: top;">
        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4891/object-menu-idle.png" style="height: 240px; width: 160px;"></p>

        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Object_menu">Dettagli</a><br>
         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding">Esempi e guide</a></p>
       </td>
       <td style="vertical-align: top;">
        <p> </p>
       </td>
      </tr>
      <tr>
       <td colspan="2" style="vertical-align: top;">
        <h2 id="Indicatori_di_attività_e_barre_di_progresso_2">Indicatori di attività e barre di progresso</h2>
       </td>
      </tr>
      <tr>
       <td style="vertical-align: top;">
        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4897/progress-bar-example.png" style="height: 240px; width: 160px;"></p>

        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Progress_and_activity">Dettagli</a><br>
         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Progress_and_activity/Coding">Esempi e guide</a></p>
       </td>
       <td style="vertical-align: top;">
        <p> </p>
       </td>
      </tr>
      <tr>
       <td colspan="2" style="vertical-align: top;">
        <h2 id="Scrolling_2">Scrolling</h2>
       </td>
      </tr>
      <tr>
       <td style="vertical-align: top;">
        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4917/scrolling-index-scroll-dark.png" style="height: 240px; width: 160px;"></p>

        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Scrolling">Dettagli</a><br>
         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Scrolling/Coding">Esempi e guide</a></p>
       </td>
       <td style="vertical-align: top;">
        <p> </p>
       </td>
      </tr>
      <tr>
       <td colspan="2" style="vertical-align: top;">
        <h2 id="Seek_bar_2">Seek bar</h2>
       </td>
      </tr>
      <tr>
       <td style="vertical-align: top;">
        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4923/seekbar-sample.png" style="height: 240px; width: 160px;"></p>

        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Seek_bar">Dettagli</a><br>
         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Seek_bar/Coding">Esempi e guide</a></p>
       </td>
       <td style="vertical-align: top;">
        <p> </p>
       </td>
      </tr>
      <tr>
       <td colspan="2">
        <h2 id="Stati">Stati</h2>
       </td>
      </tr>
      <tr>
       <td style="vertical-align: top;">
        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4637/banner.png" style="height: 240px; width: 160px;"><br>
         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Status">Dettagli</a><br>
         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Status/Coding">Esempi e guide</a></p>
       </td>
       <td style="vertical-align: top;">
        <p> </p>
       </td>
      </tr>
      <tr>
       <td colspan="2" style="vertical-align: top;">
        <h2 id="Bottoni_2">Bottoni</h2>
       </td>
      </tr>
      <tr>
       <td style="vertical-align: top;">
        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4925/switch-settings-sample.png" style="height: 240px; width: 160px;"></p>

        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Switch">Dettagli</a><br>
         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Switch/Coding">Esempi e guide</a></p>
       </td>
       <td style="vertical-align: top;">
        <p> </p>
       </td>
      </tr>
      <tr>
       <td colspan="2" style="vertical-align: top;">
        <h2 id="Schede">Schede</h2>
       </td>
      </tr>
      <tr>
       <td style="vertical-align: top;">
        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4955/tab-screenshot.png" style="height: 240px; width: 160px;"></p>

        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Tabs">Dettagli</a><br>
         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Tabs/Coding">Esempi e guide</a></p>
       </td>
       <td style="vertical-align: top;">
        <p> </p>
       </td>
      </tr>
      <tr>
       <td colspan="2" style="vertical-align: top;">
        <h2 id="Barra_degli_strumenti">Barra degli strumenti</h2>
       </td>
      </tr>
      <tr>
       <td style="vertical-align: top;">
        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4967/toolbar-sample.png" style="height: 240px; width: 160px;"></p>

        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Toolbar">Dettagli</a><br>
         <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Toolbar/Coding">Esempi e guide</a></p>
       </td>
       <td style="vertical-align: top;">
        <p> </p>
       </td>
      </tr>
      <tr>
       <td colspan="2" style="vertical-align: top;">
        <h2 id="Menu_di_selezione">Menu di selezione</h2>
       </td>
      </tr>
      <tr>
       <td style="vertical-align: top;">
        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4975/selector-nested.png" style="height: 240px; width: 160px;"></p>

        <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Value_selector">Dettagli</a></p>
       </td>
       <td style="vertical-align: top;">
        <p> </p>
       </td>
      </tr>
     </tbody>
    </table>

    <p> </p>

    <h2 id="Stati_2">Stati</h2>
   </td>
  </tr>
  <tr>
   <td style="vertical-align: top;">
    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4637/banner.png" style="height: 240px; width: 160px;"><br>
     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Status">Dettagli</a><br>
     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Status/Coding">Esempi e guide</a></p>
   </td>
   <td style="vertical-align: top;">
    <p> </p>
   </td>
  </tr>
  <tr>
   <td colspan="2" style="vertical-align: top;">
    <h2 id="Bottoni_3">Bottoni</h2>
   </td>
  </tr>
  <tr>
   <td style="vertical-align: top;">
    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4925/switch-settings-sample.png" style="height: 240px; width: 160px;"></p>

    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Switch">Dettagli</a><br>
     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Switch/Coding">Esempi e guide</a></p>
   </td>
   <td style="vertical-align: top;">
    <p> </p>
   </td>
  </tr>
  <tr>
   <td colspan="2" style="vertical-align: top;">
    <h2 id="Schede_2">Schede</h2>
   </td>
  </tr>
  <tr>
   <td style="vertical-align: top;">
    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4955/tab-screenshot.png" style="height: 240px; width: 160px;"></p>

    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Tabs">Dettagli</a><br>
     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Tabs/Coding">Esempi e guide</a></p>
   </td>
   <td style="vertical-align: top;">
    <p> </p>
   </td>
  </tr>
  <tr>
   <td colspan="2" style="vertical-align: top;">
    <h2 id="Barra_degli_strumenti_2">Barra degli strumenti</h2>
   </td>
  </tr>
  <tr>
   <td style="vertical-align: top;">
    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4967/toolbar-sample.png" style="height: 240px; width: 160px;"></p>

    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Toolbar">Dettagli</a><br>
     <a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Toolbar/Coding">Esempi e guide</a></p>
   </td>
   <td style="vertical-align: top;">
    <p> </p>
   </td>
  </tr>
  <tr>
   <td colspan="2" style="vertical-align: top;">
    <h2 id="Menu_di_selezione_2">Menu di selezione</h2>
   </td>
  </tr>
  <tr>
   <td style="vertical-align: top;">
    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4975/selector-nested.png" style="height: 240px; width: 160px;"></p>

    <p style="text-align: center;"><a href="/it/docs/Mozilla/Firefox_OS/UX/Building_blocks/Value_selector">Dettagli</a></p>
   </td>
   <td style="vertical-align: top;">
    <p> </p>
   </td>
  </tr>
 </tbody>
</table>

<p> </p>