Svelte Buttons

Use Svelte buttons and Svelte custom styles for actions in forms, dialogues, and more with support for multiple sizes, states, and more.


Bootstrap provides different styles of buttons:

  • .btn
  • .btn-default
  • .btn-primary
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-link
  • .btn-outline-default
  • .btn-outline-primary
  • .btn-outline-success
  • .btn-outline-info
  • .btn-outline-warning
  • .btn-outline-danger


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

<BaseButton icon type="primary">Button</BaseButton>

<BaseButton icon type="primary">
	<span class="btn-inner--icon">
		<i class="ni ni-bag-17" />
	<span class="btn-inner--text">With icon</span>

<BaseButton icon type="primary">
	<span class="btn-inner--icon">
		<i class="ni ni-atom" />

<BaseButton type="default">Default</BaseButton>
<BaseButton type="primary">Primary</BaseButton>
<BaseButton type="secondary">Secondary</BaseButton>
<BaseButton type="info">Info</BaseButton>
<BaseButton type="success">Success</BaseButton>
<BaseButton type="danger">Danger</BaseButton>
<BaseButton type="warning">Warning</BaseButton>

Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

<BaseButton outline type="default">Default</BaseButton>
<BaseButton outline type="primary">Primary</BaseButton>
<BaseButton outline type="secondary">Secondary</BaseButton>
<BaseButton outline type="info">Info</BaseButton>
<BaseButton outline type="success">Success</BaseButton>
<BaseButton outline type="danger">Danger</BaseButton>
<BaseButton outline type="warning">Warning</BaseButton>


Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

<BaseButton size="lg" type="primary">Large button</BaseButton>
<BaseButton size="lg" type="secondary">Large button</BaseButton>

<BaseButton size="sm" type="primary">Small button</BaseButton>
<BaseButton size="sm" type="secondary">Small button</BaseButton>

Create block level buttons—those that span the full width of a parent—by adding .btn-block.

<BaseButton block type="primary" className="mb-0">
	Block level button
<BaseButton block type="secondary">Block level button</BaseButton>

Active state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. There’s no need to add a class to <button>s as they use a pseudo-class. However, you can still force the same active appearance with .active (and include the aria-pressed="true" attribute) should you need to replicate the state programmatically.

Primary link Link

<BaseButton type="primary" className="active">Primary Link</BaseButton>
<BaseButton type="secondary" className="active">

Disabled state

Make buttons look inactive by adding the disabled boolean attribute to any <button> element.

<BaseButton type="primary" disabled>Primary button</BaseButton>
<BaseButton type="secondary" disabled>