Componentes

<Button variant="primary">Guardar inmueble</Button>
<Button variant="quiet">Cancelar</Button>

<IconButton aria-label="Cerrar"><CerrarIcon /></IconButton>

<Input label="Correo" type="email" hint="Te enviaremos el contrato aquí." />

<Select label="Distrito"><option>Miraflores</option></Select>

<Textarea label="Observaciones" />

<Checkbox label="Acepto las condiciones" />

<RadioGroup legend="Periodicidad">
  <Radio name="p" value="m" label="Mensual" />
</RadioGroup>

<Switch label="Avisos por correo" defaultChecked />

<Badge tone="success" dot>Disponible</Badge>

<Alert tone="warning" title="Falta la firma">Sube el contrato firmado.</Alert>

<Card title="…" footer={<Button size="sm">Ver ficha</Button>}>…</Card>

<Modal open={open} onClose={close} title="Eliminar inmueble" footer={…} />

<Table>
  <TableHeader><TableRow><TableHead numeric>Precio</TableHead></TableRow></TableHeader>
  …
</Table>

<Pagination page={page} pageCount={12} onPageChange={setPage} />

<Tabs aria-label="Estado" items={[{ id: "todos", label: "Todos", count: 42, content: … }]} />

<Breadcrumb items={[{ label: "Inmuebles", href: "/inmuebles" }, { label: "Miraflores 204" }]} />

campos a space-4 · grupos a space-6 · ancho field-max