# Button

Buttons are used to perform actions in forms, modals, and more. Kickstand UI buttons come with additional features that include button states, color and style variations, and best practices when dealing with links vs buttons.

Default Button

# Colors

primary secondary success info warning danger light dark
<ks-button color="primary">primary</ks-button>
<ks-button color="secondary">secondary</ks-button>
<ks-button color="success">success</ks-button>
<ks-button color="info">info</ks-button>
<ks-button color="warning">warning</ks-button>
<ks-button color="danger">danger</ks-button>
<ks-button color="light">light</ks-button>
<ks-button color="dark">dark</ks-button>

# Sizes

xs button sm button md button lg button xl button
<ks-button size="xs">xs button</ks-button>
<ks-button size="sm">sm button</ks-button>
<ks-button size="md">md button</ks-button>
<ks-button size="lg">lg button</ks-button>
<ks-button size="xl">xl button</ks-button>

# Display

# Solid (default)

primary secondary success info warning danger light dark
<ks-button color="primary">primary</ks-button>
<ks-button color="secondary">secondary</ks-button>
<ks-button color="success">success</ks-button>
<ks-button color="info">info</ks-button>
<ks-button color="warning">warning</ks-button>
<ks-button color="danger">danger</ks-button>
<ks-button color="light">light</ks-button>
<ks-button color="dark">dark</ks-button>

# Hollow

primary secondary success info warning danger light dark
<ks-button display="hollow" color="primary">primary</ks-button>
<ks-button display="hollow" color="secondary">secondary</ks-button>
<ks-button display="hollow" color="success">success</ks-button>
<ks-button display="hollow" color="info">info</ks-button>
<ks-button display="hollow" color="warning">warning</ks-button>
<ks-button display="hollow" color="danger">danger</ks-button>
<ks-button display="hollow" color="light">light</ks-button>
<ks-button display="hollow" color="dark">dark</ks-button>

# Clear

primary secondary success info warning danger light dark
<ks-button display="clear" color="primary">primary</ks-button>
<ks-button display="clear" color="secondary">secondary</ks-button>
<ks-button display="clear" color="success">success</ks-button>
<ks-button display="clear" color="info">info</ks-button>
<ks-button display="clear" color="warning">warning</ks-button>
<ks-button display="clear" color="danger">danger</ks-button>
<ks-button display="clear" color="light">light</ks-button>
<ks-button display="clear" color="dark">dark</ks-button>
primary secondary success info warning danger light dark
<ks-button display="link" color="primary">primary</ks-button>
<ks-button display="link" color="secondary">secondary</ks-button>
<ks-button display="link" color="success">success</ks-button>
<ks-button display="link" color="info">info</ks-button>
<ks-button display="link" color="warning">warning</ks-button>
<ks-button display="link" color="danger">danger</ks-button>
<ks-button display="link" color="light">light</ks-button>
<ks-button display="link" color="dark">dark</ks-button>

WARNING

The solid display option will automatically select and appropriate contrasting color to meet the WCAG 2.0 AA standard, but the other are up to your discretion. Please make sure you use these cautiously and test them for sufficient color contrast.

# States

# Disabled

Disabled Button
<ks-button disabled>Disabled Button</ks-button>

# Loading

You can put a button in a loading state by setting the loading property to true.

Loading Button
<ks-button loading>Loading Button</ks-button>

The example below shows how you can set it programmatically.

Click To Load
<ks-button id="loading_button">Click To Load</ks-button>

<script>
    let loadingButton = document.getElementById('loading_button');

    loadingButton.addEventListener('click', () => {
        loadingButton.loading = true;
        setTimeout(() => loadingButton.loading = false, 3000);
    });
</script>

Note

If a button is loading, it is also disabled.

# HREF

If the href property is populated, it will change the behavior of therefore change semantics of the markup. Buttons are for performing actions and anchors are for linking to content.

I do something
<ks-button>I do something</ks-button>

<!-- the rendered HTML -->
<ks-button class="pointer hydrated">
    ...
    <button aria-haspopup="false" type="button" class="button primary solid md">I do something</button>
</ks-button>
I go somewhere
<ks-button href="#href">I go somewhere</ks-button>

<!-- the rendered HTML -->
<ks-button href="#" class="pointer hydrated">
    <a class="button primary solid md" href="#">I go somewhere</a>
</ks-button>

# Target

The target property behaves the same as the standard HTML attribute (opens new window). When used, the <ks-button> component will automatically add rel="noreferrer noopener" for performance and security purposes.

# Accessibility

There are a number of accessibility features built in to the button to promote the a great user experience for all of your users.

  • For solid buttons, basic background and text color contrast is built-in to promote readability.
  • Automatic tag selection for links vs buttons promotes good semantics.
  • The hide-text property hides the text in the UI, but still makes it available for screen readers.
  • Additional aria attributes are available through properties (ex - controls, described-by, haspopup, etc.) to provide you with the controls you need to make your application more accessible.

# Properties

Property Attribute Description Type Default
color color button color based on theme palette "danger", "dark", "info", "light", "primary", "secondary", "success", or "warning" 'primary'
controls controls adds aria-controls attribute to button element string undefined
buttonClass button-class passes class directly to button element string ''
cssClass css-class (deprecated - use button-class) passes class directly to button element string ''
describedBy described-by adds aria-describedby attribute to button element string undefined
disabled disabled enables/disables button boolean undefined
display display controls the display type "clear", "hollow", "link", or "solid" 'solid'
expanded expanded controls aria-expanded attribute on the button element boolean false
haspopup haspopup adds aria-haspopup attribute to button element boolean false
href href adding this value will convert the button to a link string undefined
loading loading enabling this will show the loading icon and disable the button boolean undefined
size size controls the size of the button "md", "lg", "sm", "xl", or "xs" 'md'
tabIndex tab-index adds a tabindex attribute on the button element number undefined
target target adds target attribute (opens new window) to anchor tags string undefined
type type controls the button type attribute "button", "reset", or "submit" 'button'