feat(Button): add prop for vertical (stacked) layout
Nobody has claimed this yet.
- 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
orientationis intentionally separate from the existingfieldGroupvariant (which is set byButtonGroupfor border-radius adjustments). Both can coexist.- The
squareprop still works for icon-only buttons;orientation: 'vertical'is for icon + label combinations. block+orientation: 'vertical'compose naturally.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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