Buttons

With Flow CSS, you can use button variants in 7 different colors, each with its own unique identifier. Below, you'll find the code for each button variant:

1. Button Variants

   Choose from a variety of button variants to suit your design needs:

   Output:

   Primary Secondary Success Danger Warning Info Muted

                   
   <button class="btn primary">Primary</button>
   <button class="btn secondary">Secondary</button>
   <button class="btn success">Success</button>
   <button class="btn danger">Danger</button>
   <button class="btn warning">Warning</button>
   <button class="btn info">Info</button>
   <button class="btn muted">Muted</button>
                   
                 

2. Light Variant Buttons

   Choose from a variety of light variant buttons:

   Output:

   Primary Secondary Success Danger Warning Info Muted

                             
   <button class="btn primary-light">Primary</button>
   <button class="btn secondary-light">Secondary</button>
   <button class="btn success-light">Success</button>
   <button class="btn danger-light">Danger</button>
   <button class="btn warning-light">Warning</button>
   <button class="btn info-light">Info</button>
   <button class="btn muted-light">Muted</button>
                             
                           

3. Outline Variant Buttons

   Choose from a variety of outline variant buttons:

   Output:

   Primary Secondary Success Danger Warning Info Muted

                             
   <button class="btn primary-outline">Primary</button>
   <button class="btn secondary-outline">Secondary</button>
   <button class="btn success-outline">Success</button>
   <button class="btn danger-outline">Danger</button>
   <button class="btn warning-outline">Warning</button>
   <button class="btn info-outline">Info</button>
   <button class="btn muted-outline">Muted</button>
                             
                           

4. Light Fill with Outline Variant Buttons

   Explore the light fill with outline variant buttons:

   Output:

   Primary Secondary Success Danger Warning Info Muted

                             
   <button class="btn primary-light-outline">Primary</button>
   <button class="btn secondary-light-outline">Secondary</button>
   <button class="btn success-light-outline">Success</button>
   <button class="btn danger-light-outline">Danger</button>
   <button class="btn warning-light-outline">Warning</button>
   <button class="btn info-light-outline">Info</button>
   <button class="btn muted-light-outline">Muted</button>