nuxt / nuxt/ui

feat(Button): add prop for vertical (stacked) layout

Open Beginner friendly
#6,527 1 comment 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

triage
Dominant language
TypeScript
Stars
6.9k
Forks
1.1k
Avg merge
1d 7h
Merged PRs (30d)
57

Description

Summary

Add an orientation prop to UButton that controls the internal layout of its content (icon + label). This aligns with the existing orientation pattern already used across Nuxt UI components (e.g. ButtonGroup, ToggleGroup, Breadcrumb).

Motivation

Currently the UButton always renders its content horizontally (inline-flex items-center). A vertical/stacked layout — icon on top, label below — is a common pattern in:

  • Mobile navigation bars (tab bars with icon + label)
  • Toolbars / action panels
  • Vertical menus or sidebars
  • Card-style buttons

Right now these require wrapping UButton in custom markup or overriding classes via ui.base, which is fragile.

Proposed API

<!-- horizontal (default, current behavior) -->
<UButton icon="i-lucide-home" label="Home" orientation="horizontal" />

<!-- vertical (stacked: icon above, label below) -->
<UButton icon="i-lucide-home" label="Home" orientation="vertical" />
Prop Type Default
orientation 'horizontal' | 'vertical' 'horizontal'

Implementation sketch

src/theme/button.ts — add orientation variant:

orientation: {
  horizontal: '',         // keeps current inline-flex items-center behaviour
  vertical: 'flex-col justify-center'
}

The base slot already has inline-flex items-center; flex-col overrides the direction and justify-center keeps content centred.

ButtonProps:

/**
 * The orientation of the button content.
 * @defaultValue 'horizontal'
 */
orientation?: 'horizontal' | 'vertical'

Button.vue — pass orientation to tv():

ui = computed(() => tv(...)({
  ...
  orientation: props.orientation
}))

Notes

  • orientation is intentionally separate from the existing fieldGroup variant (which is set by ButtonGroup for border-radius adjustments). Both can coexist.
  • The square prop still works for icon-only buttons; orientation: 'vertical' is for icon + label combinations.
  • block + orientation: 'vertical' compose naturally.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with src/theme/button.ts to inspect the existing button variants, then read ButtonProps and the UI computation in Button.vue. Compare the orientation pattern in ButtonGroup, ToggleGroup, or Breadcrumb. Done means UButton accepts horizontal and vertical orientation values, preserves the horizontal default, and stacks icon and label content for vertical buttons.

Written by the indexing model from the issue text.

Assessment

Tech stack
tailwindcss, typescript
Domain
frontend
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
72/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.