[Feature Request] vBtn could have wrap-text props

[sinh117801]

Problem to solve

Should allow the button to wrap the text

Codepen link: https://codepen.io/sinh117801/pen/dyYmEXx

Proposed solution

the solution i use is to custom .v-btn__content

.v-btn__content { width: 100%; white-space: normal; }

[phiter]

I understand the issue but I think it's important to note that the Material Design spec is against this.

Material Design - Buttons Anatomy.

The button text should be in a single line and also it should be short, which would make buttons less prone to need line breaking.

[sinh117801]

Thank for explanation and ref. I got the point now.

[Blindpupil]

This is unavoidable when you have to cater for other languages. I'm currently working on a German client and the words are just too long to avoid this issue.

[bmikaili]

How do people handle long text in buttons?

[tarreislam]

How do people handle long text in buttons?

I ended up creating my own custom component

[arturslab]

This is my simple solution for wrapping long text in buttons
https://codepen.io/melma-pl/pen/jOXgoLr

[hanamurayuki]

I ended up below way.

<v-btn>
  <span>
    1st line<br />
    <span class="text-caption" style="line-height: unset">2nd line</span>
  </span>
</v-btn>