Set Button width

1

I cant find anything how to set the width of a Button in Framework7. I want the button to be the same width for example as in the template or examples of framework7 Espresso or Seven Burger.
Heres my code:

const HomePage = () => (
  <Page class="page" name="home" bgColor='teal'>
    {/* Page content */}
    <div class="page-content display-flex flex-direction-column text-align-center justify-content-center">
      <div>
          <img src="/images/dartboard2.png" alt="pic" width="300"></img>
          <h1>Darts</h1>
          
          <Button color="red" raised fill button-round large>
                Let's dart!
          </Button>
           
        </div>
    </div>
  </Page>
);
export default HomePage;

How can I set the button width?

2

There are many ways to do it…
You can set as default on root variables:

:root {
  --f7-button-min-width: 80px;
}

Or you can wrap the button on a div and control the width by this container.

<div class="button-container">
    <Button color="red" raised fill button-round large>
         Let's dart!
    </Button>
</div>

Probably it also works by setting style directly to the element:

<button style="width: 100%"></button>

And of course customizing your own button mixed with your custom classes/styles as the documentation suggests:

<!-- rounded and filled button -->
<a class="button button-round button-fill">Button</a>

Hopefully some of these approaches work for you! :+1:
Check documentation for more: