Stack

Stack organiza elementos relacionados em um eixo. Escolha direção e gap; o CSS possui o layout, então o mesmo contrato .lyra-stack funciona fora do React, sem virar uma utility isolada.

Exemplos

Uma sequência vertical

A folha de estilos fornece coluna e gap --space-4 quando você omite props. Assim há uma fonte de verdade: Stack não emite propriedade customizada até precisar divergir do contrato do CSS.

Production deploymentVersion 2.4.0 is waiting for approval.

Direção e distribuição

Uma linha é útil quando os itens compartilham uma decisão. Use justify="space-between" apenas quando as pontas estiverem relacionadas; ele não substitui escolher um gap útil.

ProductionHealthy

Inline

Controles pares em uma linha que quebra

Inline é o irmão horizontal de Stack. Ele define direção em linha, gap --space-2 e quebra, para que controles pares e compactos se reorganizem em vez de causar overflow numa largura estreita.

Quando usar

Use Stack quando a ordem entre os filhos importa mais que uma trilha compartilhada em duas dimensões.

As propriedades customizadas abaixo formam o contrato de HTML puro. Stack deixa cada uma ausente quando sua prop correspondente é omitida; a folha de estilos fornece os padrões efetivos.

Propriedade	Padrão da folha de estilos
`--lyra-stack-direction`	`column`
`--lyra-stack-gap`	`var(--space-4)`
`--lyra-stack-align`	`stretch`
`--lyra-stack-justify`	`flex-start`
`--lyra-stack-wrap`	`nowrap`

Prefira outro componente quando:

Os itens são pares horizontais compactos que devem quebrar — use Inline.
Os itens precisam se alinhar em linhas e colunas — use Grid.
A região precisa de uma largura máxima de conteúdo — use Container em volta do Stack.

Acessibilidade

Stack renderiza uma <div> a menos que as escolha outro elemento nativo; ele não adiciona role.
Use as="ul" ou as="ol" para uma lista de verdade e mantenha cada filho como um <li>.
A direção muda o layout visual, não a ordem do DOM ou do teclado. Coloque o filho mais importante primeiro no código, especialmente quando uma linha quebra.
Inline herda a semântica de Stack. A quebra evita controles cortados, mas cada controle ainda precisa do próprio nome acessível e de foco visível.

API e código

Nome	Tipo	Obrigatória	Descrição
`direction`	`'row' \| 'column'`	—	Flex direction. Effective default: `"column"` from the stylesheet.
`gap`	`number \| string`	—	Spacing-scale step or a CSS gap value. Effective default: `4` from the stylesheet.
`align`	`CSSProperties['alignItems']`	—	Cross-axis alignment. Effective default: `"stretch"` from the stylesheet.
`justify`	`CSSProperties['justifyContent']`	—	Main-axis distribution. Effective default: `"flex-start"` from the stylesheet.
`wrap`	`boolean`	—	Allow items to wrap onto additional lines. Default: `false`.
`as`	`keyof React.JSX.IntrinsicElements`	—	Element to render. Default: `"div"`.

Os wrappers React definem essas propriedades para você. Aplique a mesma classe e propriedades em qualquer outro framework:

html

<div class="lyra-stack" style="--lyra-stack-gap: var(--space-4)">
  <strong>Deploy em produção</strong>
  <span>A versão 2.4.0 aguarda aprovação.</span>
</div>

<div
  class="lyra-stack"
  style="--lyra-stack-direction: row; --lyra-stack-gap: var(--space-2); --lyra-stack-align: center; --lyra-stack-wrap: wrap"
>
  <button class="lyra-btn lyra-btn--primary lyra-btn--sm">Salvar</button>
  <button class="lyra-btn lyra-btn--ghost lyra-btn--sm">Cancelar</button>
</div>

<lyra:stack> Gerado do lyra-ds/blade v0.10.0.

Prop	Padrão	Obrigatória	Valores de exemplo
`direction`	`null`	—	—
`gap`	`null`	—	—
`align`	`null`	—	—
`justify`	`null`	—	—
`wrap`	`false`	—	—
`as`	`'div'`	—	—

blade

<lyra:stack direction="row" gap="md" align="center" justify="between">
    <lyra:badge tone="success">Deployed</lyra:badge>
    <lyra:button variant="secondary" size="sm">View logs</lyra:button>
</lyra:stack>