> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nubea.com.ar/llms.txt
> Use this file to discover all available pages before exploring further.

# Barra de acción

> Una barra fija abajo con el precio y el botón de comprar, para que nadie tenga que volver a subir.

## ¿Cómo funciona?

En el celular, la ficha de producto es larga: fotos, descripción, preguntas,
reseñas. Cuando alguien termina de leer y se decide, el botón de comprar quedó
tres pantallas más arriba.

La barra de acción resuelve eso: aparece pegada abajo con la foto, el precio y
el botón, y desde ahí se agrega al carrito sin volver a subir.

<div
  style={{
border: '1px solid #e5e7eb',
borderRadius: 12,
overflow: 'hidden',
maxWidth: 320,
background: '#fff'
}}
>
  <div style={{ padding: 16, opacity: 0.45 }}>
    <div
      style={{
    height: 120,
    background: '#f3f4f6',
    borderRadius: 8,
    marginBottom: 12
  }}
    />

    <div
      style={{
    height: 10,
    width: '70%',
    background: '#e5e7eb',
    borderRadius: 4,
    marginBottom: 8
  }}
    />

    <div
      style={{
    height: 10,
    width: '45%',
    background: '#e5e7eb',
    borderRadius: 4
  }}
    />
  </div>

  <div
    style={{
  display: 'flex',
  alignItems: 'center',
  gap: 10,
  padding: '10px 12px',
  background: '#111827',
  color: '#fff'
}}
  >
    <div
      style={{
    width: 42,
    height: 42,
    flex: '0 0 42px',
    borderRadius: 6,
    background: '#fff'
  }}
    />

    <div style={{ flex: '1 1 auto', minWidth: 0 }}>
      <div
        style={{
      fontSize: 13,
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis'
    }}
      >
        Campera Wool Classics
      </div>

      <div style={{ fontSize: 15, fontWeight: 700 }}>\$ 89.900</div>
    </div>

    <div
      style={{
    flex: '0 0 auto',
    borderRadius: 8,
    padding: '11px 16px',
    background: '#22c55e',
    color: '#052e16',
    fontWeight: 700,
    fontSize: 14,
    whiteSpace: 'nowrap'
  }}
    >
      Agregar
    </div>
  </div>
</div>

## Cuándo aparece

La barra **no** aparece a los tantos píxeles de scroll: aparece cuando el botón
de comprar de tu tienda sale de la pantalla, y se va cuando vuelve a estar a la
vista.

Eso es a propósito. Una ficha larga esconde el botón enseguida y una corta no lo
esconde nunca, así que cualquier número fijo tapa contenido en las tiendas que
no lo necesitaban.

## Talles y variantes

Si el producto tiene talles o colores y el cliente todavía no eligió ninguno, el
botón dice **“Elegir talle”** y despliega las opciones arriba de la barra. Los
talles sin stock aparecen tachados y no se pueden elegir.

Recién cuando hay una variante elegida el botón agrega al carrito. Nunca elige
una por el cliente.

## Configuración

* **Dónde se muestra**: solo en celulares (lo recomendado) o también en
  computadoras. En una computadora el botón de comprar casi siempre sigue a la
  vista, así que ahí la barra suele tapar más de lo que ayuda.
* **Texto del botón**: si lo dejás vacío usamos “Agregar al carrito”. Comparte
  una línea de celular con el precio, así que cuanto más corto, mejor.
* **Mostrar el precio** y **mostrar la foto**: se pueden apagar si preferís una
  barra más limpia.
* **Colores**: fondo y texto de la barra, fondo y texto del botón.

<Note>
  Si también usás la barra de envío gratis o el regalo del carrito, no se pisan:
  la barra de acción se apoya arriba de las que ya estén abajo y se reacomoda
  sola cuando alguna aparece o desaparece.
</Note>