# Buttons Buttons are Bootstrap's core component for triggering various actions. In Shards, they're very flxible, support multiple sizes, states and many more. ## Button Themes Using the `theme` prop you can easily change the appearance of your button using one the main theme colors: `primary, secondary, success, danger, warning, info, light` and `dark`. The default theme value is `primary`. :::demo ```html Primary Secondary Success Info Warning Danger Light Dark ``` ::: ## Outline Styled Buttons Using the `outline` prop removes the background color and applies a thin border that make your buttons to look outlined. :::demo ```html Primary Secondary Success Info Warning Danger Light Dark ``` ::: ## Pill Shaped Buttons Using the `pill` prop appiles a larger border radius that make your buttons to look more rounded and pill-like. :::demo ```html Primary Secondary Success Info Warning Danger Light Dark ``` ::: ## Mixed Styles Similarly to [Badges](/docs/components/badges) you can also mix both `pill` and `outline` props to get a mixed "outline-pill" result. :::demo ```html Primary Secondary Success Info Warning Danger Light Dark ``` ::: ## Squared Style Using the `squared` prop you can style your buttons to look, well, squared. :::demo ```html Primary Secondary Success Info Warning Danger Light Dark ``` ::: > **Note:** The `pill` prop has priority over the `squared` prop. ## Mixed Outline-Squared Style Mixing the `outline` and `squared` prop is also possible and it will render an outlined and squared button. :::demo ```html Primary Secondary Success Info Warning Danger Light Dark ``` ::: ## Button Sizes Buttons come in three size variations: `lg`, normal (default) and `sm`. You can control the size of your buttons using the `size` prop. :::demo ```html Large Normal Small ``` ::: ## Active State If you need to control the `active` state and appearance of your button programatically, you can use the `active` prop. :::demo ```html Success Active Danger Active ``` ::: ## Disabled State Similarly to the active state, the `disabled` state can also be crontrolled via the `disabled` prop. :::demo ```html Success Disabled Danger Disabled ``` ::: ## Toggle State Toggling a button's state is currently not supported, but available on the [roadmap](/roadmap). ## Change Tags Changing the button's tag (eg. using native `` or `` elements) is currently not supported, but available on the [roadmap](/roadmap). ## Block Level Buttons Using the `block-level` prop you can make buttons display using the full-width of their parent element :::demo ```html Primary Secondary ``` ::: ## Alias The `` component is also available as ``.