Svelte Bootstrap Buttons

Svelte Buttons - Bootstrap 4 & Material Design

Svelte Bootstrap buttons are components which are triggering a desirable user interaction. Easy to customize in terms of size, shape, and color.

Basic examples

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

<script>
  import {MDBBtn, MDBContainer} from "mdbsvelte";
</script>
<MDBContainer>
  <MDBBtn color="primary">Primary</MDBBtn>
  <MDBBtn>Default</MDBBtn>
  <MDBBtn color="secondary">Secondary</MDBBtn>
  <MDBBtn color="success">Success</MDBBtn>
  <MDBBtn color="info">Info</MDBBtn>
  <MDBBtn color="warning">Warning</MDBBtn>
  <MDBBtn color="danger">Danger</MDBBtn>
</MDBContainer>

Additional styles

MDBootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

<script>
  import {MDBBtn, MDBContainer} from "mdbsvelte";
</script>
<MDBContainer>
  <MDBBtn color="elegant">Elegant</MDBBtn>
  <MDBBtn color="unique">Unique</MDBBtn>
  <MDBBtn color="pink">Pink</MDBBtn>
  <MDBBtn color="purple">Purple</MDBBtn>
  <MDBBtn color="deep-purple">Deep-purple</MDBBtn>
  <MDBBtn color="indigo">Indigo</MDBBtn>
  <MDBBtn color="light-blue">Light blue</MDBBtn>
  <MDBBtn color="cyan">Cyan</MDBBtn>
  <MDBBtn color="dark-green">Dark-green</MDBBtn>
  <MDBBtn color="light-green">Light-green</MDBBtn>
  <MDBBtn color="yellow">Yellow</MDBBtn>
  <MDBBtn color="amber">Amber</MDBBtn>
  <MDBBtn color="deep-orange">Deep-orange</MDBBtn>
  <MDBBtn color="brown">Brown</MDBBtn>
  <MDBBtn color="blue-grey">Blue-grey</MDBBtn>
  <MDBBtn color="mdb-color">MDB</MDBBtn>
</MDBContainer>

Gradient buttons

Check our documentation about gradients.

<script>
  import {MDBBtn, MDBContainer} from "mdbsvelte";
</script>
<MDBContainer>
  <MDBBtn gradient="peach">Peach</MDBBtn>
  <MDBBtn gradient="purple">Purple</MDBBtn>
  <MDBBtn gradient="blue">Blue</MDBBtn>
  <MDBBtn gradient="aqua">Aqua</MDBBtn>
</MDBContainer>

Outline buttons

In need of a button, but not the hefty background colors they bring? outline property removes all background images and colors on any button.

<script>
  import {MDBBtn, MDBContainer} from "mdbsvelte";
</script>
<MDBContainer>
  <MDBBtn outline color="primary">Primary</MDBBtn>
  <MDBBtn outline>Default</MDBBtn>
  <MDBBtn outline color="secondary">Secondary</MDBBtn>
  <MDBBtn outline color="success">Success</MDBBtn>
  <MDBBtn outline color="info">Info</MDBBtn>
  <MDBBtn outline color="warning">Warning</MDBBtn>
  <MDBBtn outline color="danger">Danger</MDBBtn>
</MDBContainer>

Buttons with icons

<script>
  import {MDBBtn, MDBContainer, MDBIcon} from "mdbsvelte";
</script>
<MDBContainer>
  <MDBBtn color="primary">
    <MDBIcon icon="magic" class="mr-1"/>
    Left
  </MDBBtn>
  <MDBBtn color="default">
    Right
    <MDBIcon icon="magic" class="ml-1"/>
  </MDBBtn>
</MDBContainer>

Buttons as link

In order to use links styled as button just use MDBButton component with href property.

Primary href Secondary href target blank

<script>
  import {MDBBtn, MDBContainer} from "mdbsvelte";
</script>
<MDBContainer>
  <MDBBtn href="#" color="primary">
    Primary href
  </MDBBtn>
  <MDBBtn
    href="https://www.mdbootstrap.com"
    target="_blank"
    color="secondary"
  >
    Secondary href target blank
  </MDBBtn>
</MDBContainer>

Sizes

Fancy larger or smaller buttons? Add size property for additional sizes.

<script>
  import {MDBBtn, MDBContainer} from "mdbsvelte";
</script>
<MDBContainer>
  <MDBBtn color="primary" size="lg">Large button</MDBBtn>
  <MDBBtn color="mdb-color">Normal button</MDBBtn>
  <MDBBtn color="dark-green" size="sm">Small button</MDBBtn>
</MDBContainer>

Active state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. You can force the same active appearance with active prop.

<script>
  import {MDBBtn, MDBContainer} from "mdbsvelte";
</script>
<MDBContainer>
  <MDBBtn active color="primary">Active Button</MDBBtn>
  <MDBBtn color="primary">Button</MDBBtn>
</MDBContainer>

Disabled state

Make buttons look inactive by adding the disabled boolean prop to any <MDBBtn> component.

<script>
  import {MDBBtn, MDBContainer} from "mdbsvelte";
</script>
<MDBContainer>
  <MDBBtn color="primary" disabled size="lg">Primary button</MDBBtn>
  <MDBBtn color="default" disabled size="lg">Default button</MDBBtn>
</MDBContainer>

No Preview