nuxt / nuxt/ui

Buttons size based on device?

Open
#2,390 9 comments 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

For what version of Nuxt UI are you asking this question?

v2.x

Description

Hi!

I was wondering if there was an easy way to change variants/sizes etc for components (particularly buttons) based on the user's device

For example,

<UButton size="sm xl:lg"/>

There are lots of instances where a button need to be smaller on mobile, so would be nice to have that! I didn't found anything in the docs

P.S. bought Nuxt UI Pro a couple of days ago to support the team. Keep up the great work! 😄

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 by reviewing the Nuxt UI v2 button API and the existing component documentation, especially sizing and variants. Determine whether responsive device-based sizing is supported or needs a documented feature, then verify that the proposed usage works across breakpoints and is covered in the documentation or relevant tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, tailwindcss, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.