Astro Buttons - Ecommerce

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

Classes

Bootstrap provides different styles of buttons:

  • .btn .btn-dark .btn-white .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link .btn-outline-primary .btn-outline-success .btn-outline-info .btn-outline-warning .btn-outline-danger

Examples

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

<button class="btn btn-dark me-2" type="button">Button</button>

<button class="btn btn-dark btn-icon d-flex align-items-center me-2" type="button">
	<span class="btn-inner--icon">
		<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" class="d-block me-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
			<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
		</svg>
	</span>
  <span class="btn-inner--text">With icon</span>
</button>

<button type="button" class="btn btn-dark btn-icon px-3 me-2">
	<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
		<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
	</svg>
</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-white">White</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>

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.

<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-white">White</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>

Icon Buttons

Sometimes you need a button to indicate an action using only a icon.

<button type="button" class="btn btn-dark btn-icon px-3">
	<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
		<path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
	</svg>
</button>

<button type="button" class="btn btn-dark btn-icon px-3">
	<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
		<path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"></path>
	</svg>
</button>

<button type="button" class="btn btn-dark btn-icon px-3">
	<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
		<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
	</svg>
</button>

<button type="button" class="btn btn-dark btn-icon d-flex align-items-center">
	<span class="btn-inner--icon">
		<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" class="d-block me-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
			<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
		</svg>
	</span>
	<span class="btn-inner--text">Search</span>
</button>

<button type="button" class="btn btn-dark btn-icon d-flex align-items-center">
	<span class="btn-inner--text">Upload</span>
	<span class="btn-inner--icon">
		<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" class="d-block ms-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
			<path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
		</svg>
	</span>
</button>

Social Buttons

Use these button styles when building social media login forms using Facebook, Twitter, GitHub, Google, and Apple.

<button type="button" class="btn btn-white btn-icon">
	<span class="btn-inner--icon me-1">
		<svg viewBox="0 0 24 24" width="14" height="14" xmlns="http://www.w3.org/2000/svg">
			<g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)">
			<path fill="#4285F4" d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z"></path>
				<path fill="#34A853" d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z"></path>
				<path fill="#FBBC05" d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z"></path>
				<path fill="#EA4335" d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z"></path>
			</g>
		</svg>
	</span>
	<span class="btn-inner--text">Sign in with Google</span>
</button>

<button type="button" class="btn btn-dark btn-icon">
	<span class="btn-inner--icon me-1">
		<i class="fa fa-github" aria-hidden="true"></i>
	</span>
	<span class="btn-inner--text">Sign in with Github</span>
</button>

Button Group

The button group component can be used to stack together multiple buttons and links inside a single element.

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-dark btn-icon d-flex align-items-center">
    <span class="btn-inner--icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" class="d-block me-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M7 16l-4-4m0 0l4-4m-4 4h18"></path>
      </svg>
    </span>
    <span class="btn-inner--text">Previous Page</span>
  </button>
  <button type="button" class="btn btn-dark btn-icon d-flex align-items-center">
    <span class="btn-inner--text">Next Page</span>
    <span class="btn-inner--icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" class="d-block ms-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
      </svg>
    </span>
  </button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-dark btn-icon px-3">
    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
    </svg>
  </button>
  <button type="button" class="btn btn-dark btn-icon px-3">
    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"></path>
    </svg>
  </button>
  <button type="button" class="btn btn-dark btn-icon px-3">
    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
    </svg>
  </button>
</div>

Sizes

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

<button type="button" class="btn btn-dark btn-lg">Large button</button>
<button type="button" class="btn btn-white btn-lg">Large button</button>
<button type="button" class="btn btn-dark btn-sm">Small button</button>
<button type="button" class="btn btn-white btn-sm">Small button</button>

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

<button type="button" class="btn btn-dark btn-lg w-100">Block level button</button>
<button type="button" class="btn btn-white btn-lg w-100">Block level button</button>

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 
<a href="javascript:;" class="btn btn-dark btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="javascript:;" class="btn btn-white btn-lg active" role="button" aria-pressed="true">Link</a>

Disabled State

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

<button type="button" class="btn btn-lg btn-dark" disabled>Primary button</button>
<button type="button" class="btn btn-white btn-lg" disabled>Button</button>