aura
Home Aura
aura

Button

The Button component is used to trigger actions in the app.

Attributes

  • text - The text to display on the button.
  • variant - The primary variant.
  • href - The URL to link to. If this attribute is present, the button will be rendered as an anchor tag.

Basic Usage

Copy to clipboard

<aura:button text="Click me!" />

Variants

The button component has a number of variants that can be used to change the appearance of the button.

Copy to clipboard

<aura:button primary ... />
<aura:button solid ... />
<aura:button outline ... />
<aura:button ghost ... />
<aura:button glow ... />
<aura:button danger ... />
<aura:button success ... />

Sizes

The button component has a number of sizes that can be used to change the appearance of the button. Default size is medium.

Copy to clipboard

<aura:button xxs ... />
<aura:button xs ... />
<aura:button sm ... />
<aura:button md ... />
<aura:button lg ... />

Icon

The button component can also display an icon.

Copy to clipboard

<aura:button icon="tag" />
<aura:button icon-start="tag" ... />
<aura:button icon="tag" ... />

Button Group

The button group component is used to group buttons together.

Copy to clipboard

<aura:button.group>
    <aura:button solid text="Button 1" />
    <aura:button solid text="Button 2" />
    <aura:button solid text="Button 3" />
</aura:button.group>

Mixed Group

The button group component can also contain other components.

Copy to clipboard

<aura:button.group>
    <aura:button solid>Button</aura:button>
    <aura:button solid icon="paper-clip" />
</aura:button.group>

Group with Dropdown

The button group component can also contain dropdowns.

Copy to clipboard

<aura:button.group>
    <aura:button solid text="Button" />
    <aura:dropdown>
        <aura:button solid icon="chevron-down" />
        <aura:dropdown.content>
            <aura:dropdown.button text="Item 1" />
            <aura:dropdown.button text="Item 2" />
            <aura:dropdown.button text="Item 3" />
        </aura:dropdown.content>
    </aura:dropdown>
</aura:button.group>

The button component can also be used as a link.

Visit Kolleg Essig

Copy to clipboard

<aura:button 
    href="https://kolleg-essig.ch"
    text="Visit Kolleg Essig"
/>

Opens Modal

read more about modal here

Modal Title

Modal Content

Copy to clipboard

<aura:button show-modal="test-modal" text="Open Modal" />