Concorde UI component — Button. The length of the button depends on the size of its content Doc ID: core/components/ui/button/button. Keywords: Concorde, supersoniks, core/components/ui/button/button, button, Button, UI component, sonic-button, web component. URL: https://concorde.supersoniks.org/crawl/core/components/ui/button/button.html.

Button

Type

<div class="flex flex-wrap gap-2">
      <sonic-button>Default</sonic-button>
      <sonic-button type="primary">Primary</sonic-button>
      <sonic-button type="neutral">Neutral</sonic-button>
      <sonic-button type="warning">Warning</sonic-button>
      <sonic-button type="info">Info</sonic-button>
      <sonic-button type="success">Success</sonic-button>
      <sonic-button type="danger">Danger</sonic-button>
      <sonic-button type="custom" style="--sc-btn-custom-color: #fde68a; --sc-btn-custom-bg: #5b21b6">Custom</sonic-button>
    </div>

Outline

<div class="flex flex-wrap gap-2">
      <sonic-button variant="outline">Default</sonic-button>
      <sonic-button variant="outline" type="primary">Primary</sonic-button>
      <sonic-button variant="outline" type="neutral">Neutral</sonic-button>
      <sonic-button variant="outline" type="warning">Warning</sonic-button>
      <sonic-button variant="outline" type="info">Info</sonic-button>
      <sonic-button variant="outline" type="success">Success</sonic-button>
      <sonic-button variant="outline" type="danger">Danger</sonic-button>
      <sonic-button variant="outline" type="custom" style="--sc-btn-custom-bg: #5b21b6">Custom</sonic-button>
    </div>

Variant

<sonic-button variant="default">Default</sonic-button>
    <sonic-button variant="outline">Outline</sonic-button>
    <sonic-button variant="ghost">Ghost</sonic-button>
    <sonic-button variant="link">Link</sonic-button>
    <sonic-button variant="unstyled">Unstyled</sonic-button>

Size

<sonic-button size="2xs">2Xs button</sonic-button>
    <sonic-button size="xs">Xs button</sonic-button>
    <sonic-button size="sm">Sm button</sonic-button>
    <sonic-button size="md">Md button</sonic-button>
    <sonic-button>Default button</sonic-button>
    <sonic-button size="lg">Lg button</sonic-button>
    <sonic-button size="xl">Xl button</sonic-button>
    <sonic-button size="2xl">2Xl button</sonic-button>

Shape

<sonic-button shape="circle"> 😂 </sonic-button>
    <sonic-button shape="square"> 🚀 </sonic-button>

Loading

The length of the button depends on the size of its content

<sonic-button loading></sonic-button>
    <sonic-button loading>Loading button</sonic-button>

Swap

<sonic-button formDataProvider="button_swap_example" name="youpi" value="youpla" type="primary" shape="circle" variant="outline" class="mr-4">
      <sonic-icon library="iconoir" swap="on" name="eye-empty"></sonic-icon>
      <sonic-icon library="iconoir" swap="off" name="eye-off"></sonic-icon>
    </sonic-button>
    <sonic-button formDataProvider="button_swap_example" name="youpi" value="youpla" type="primary" variant="outline">
      <sonic-icon library="iconoir" swap="on" slot="prefix" name="eye-empty"></sonic-icon>
      <sonic-icon library="iconoir" swap="off" slot="prefix" name="eye-off"></sonic-icon>
      Révélez
      <span swap="off">...</span>
      <span swap="on">moi !</span>
    </sonic-button>

Reset

<div formDataProvider="button-reset-demo" class="mb-2">
      <sonic-checkbox name="aChexbox" value="AValueToSet">Set A value</sonic-checkbox><br>
      <sonic-button reset>Reset current formDataProvider</sonic-button>
    </div>
      <sonic-button reset="button-reset-demo">Reset formDataProvider by name</sonic-button>

GoBack

<sonic-button goBack type="primary" variant="outline"  class="mr-4">
      <sonic-icon library="iconoir" slot="prefix" name="arrow-left"></sonic-icon>
      Retour classique
    </sonic-button>
    <sonic-button goBack="http://la-billetterie.net" type="primary" variant="outline"  class="mr-4">
      <sonic-icon library="iconoir" slot="prefix" name="arrow-left"></sonic-icon>
      Retour url prédéfinie
    </sonic-button>

Button with icon

<sonic-button goBack type="primary" variant="outline"  class="mr-4">
      <sonic-icon library="iconoir" slot="prefix" name="arrow-right" ></sonic-icon>
      Button with icon
    </sonic-button>

Button group

<sonic-group label="Code promo" class="mr-4">
      <sonic-input placeholder="Entrez votre code ici..."></sonic-input>
      <sonic-button type="primary" shape="square">
        <sonic-icon library="iconoir" library="iconoir" name="gift"></sonic-icon>
      </sonic-button>
    </sonic-group>
    <sonic-divider size="lg"></sonic-divider>
    <div class="text-lg mb-2">Choose a subscription</div>
    <sonic-group formDataProvider="subscriptionData">
      <sonic-button radio minWidth="10rem" name="subscription" value="standard" type="default"
        >😎 Standard</sonic-button
      >
      <sonic-button radio minWidth="10rem" name="subscription" value="premium" type="default">⭐ Premium</sonic-button>
      <sonic-button radio minWidth="10rem" name="subscription" value="diamond" type="default">💎 Diamond</sonic-button>
    </sonic-group>

Aria-label

<sonic-button data-aria-label="Custom aria label" type="primary" >
        Button with aria label
      </sonic-button>
       <sonic-button data-aria-label="Custom aria label" href="https://google.fr" type="primary" >
        Button link with aria label
      </sonic-button>

Custom styles & active states with tailwind

<div formDataProvider="subscriptionData2">
      <sonic-button
        class="bg-neutral-100 transition-all text-center text-lg text-neutral-400 rounded-md min-w-[8rem] [&[active]]:text-danger-content [&[active]]:min-w-[13rem] [&[active]]:bg-danger [&[active]]:font-black [&[active]]:rounded-full"
        variant="unstyled"
        checkable unique 
        name="subscription"
        value="premium"
        type="default">
          <span swap="off" class="inline-block py-2 px-3" >subscribe</span>
          <span swap="on" class="inline-block py-2 px-3" >⭐ Premium</span>
      </sonic-button>
    </div>