---
agentTools:
  projectIndex: https://docs.usecreator.com/llms.txt
---

# Buttons & Button Bars

Buttons and Button Bars are some of the most commonly used Components in Creator. Let's dive in and learn how to use them!

[block:api-header]
{
  "type": "basic",
  "title": "Button Properties"
}
[/block]

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/ba5f888-Screenshot_2016-11-03_13.52.17.png",
        "Screenshot 2016-11-03 13.52.17.png",
        2078,
        844,
        "#1e3050"
      ]
    }
  ]
}
[/block]

## Link

**Link** allows you to navigate to a different page or add a special link to this button. Please see our [Navigation & Special Links](https://docs.usecreator.com/docs/navigation) documentation for more information.

## Text

**Text** allows you to specify the textual content of the button. (Feel free to use [Templating Syntax](https://docs.usecreator.com/docs/templating-syntax))

**Size** allows you to set the font size in pixels for the button text.

**Align** lets you choose from a standard left, center, right, or justify text alignment.

**Weight** determines the font weight of the text, as well as whether or not the text is italic.

**Color** is a color picker that lets you choose the color for the text.

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/61da5f3-Screenshot_2016-11-03_13.55.31.png",
        "Screenshot 2016-11-03 13.55.31.png",
        2078,
        1430,
        "#1d2c49"
      ]
    }
  ]
}
[/block]

## Style

**Width** allows you to set whether or not the button is inline (only the width of the text), block (the width of it's container), or full-width (extending beyond the container to the width of the page).

**Type** allows you to set the visual type for this button. Pictures of each option are in the dropdown for the setting.

**Theme** allows you to choose the color scheme for the button. See [Theming & SCSS](https://docs.usecreator.com/docs/theming-scss) for information on working with these Theme colors.

**Size** determines whether or not the button is small, medium, or large.

**Radius** allows you to set the overall corner radius for the button, or individually set each of the four corners.

**Classes** lets you freeform add CSS classes that will be placed on this component.

## Icon

**Icon** allows you to choose an icon to put on the button. "No Icon" is the option you should choose if you'd like to remove the icon.

**Position** allows you to choose if the icon is aligned left, right, or center compared to the text.

## Angular Directives

**Angular Directives** lets you add [Directives](https://docs.usecreator.com/docs/directives) to the component.

## Convert to HTML

**Convert to HTML** let's you turn this component into an HTML component so you can edit it to your hearts content.

[block:api-header]
{
  "type": "basic",
  "title": "Button Bars"
}
[/block]

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/be0a942-Screenshot_2016-11-03_14.04.48.png",
        "Screenshot 2016-11-03 14.04.48.png",
        2070,
        672,
        "#1f345c"
      ]
    }
  ]
}
[/block]

When you drag over a Button Bar, you'll see that we pre-populate it with three different buttons for you. These buttons can be deleted, and additional buttons can be dragged in if you like. Each button works with it's own properties from above.

[block:callout]
{
  "type": "info",
  "title": "Learn how to toggle content with a button bar",
  "body": "Check out our [Toggling Content](https://docs.usecreator.com/docs/toggling-content) Weekly Workshop to learn how to use a button bar to toggle between different sets of content."
}
[/block]

## Style

**Classes** lets you freeform add CSS classes that will be placed on this component.

## Angular Directives

**Angular Directives** lets you add [Directives](https://docs.usecreator.com/docs/directives) to the component.

## Convert to HTML

**Convert to HTML** let's you turn this component into an HTML component so you can edit it to your hearts content.