{
  "uiType": "element",
  "name": "Button",
  "description": "A button indicates a possible user action.",
  "tagName": "ui-button",
  "exportName": "UIButton",
  "examples": {
    "defaultPluralContent": "\n  <ui-button>One</ui-button>\n  <ui-button>Two</ui-button>\n  <ui-button>Three</ui-button>\n"
  },
  "content": [
    {
      "name": "Icon",
      "includeAttributeClass": true,
      "attribute": "icon",
      "couplesWith": ["ui-icon"],
      "description": "include an icon",
      "exampleCode": "<ui-button icon=\"pause\">Pause</ui-button>"
    }
  ],
  "types": [
    {
      "name": "Emphasis",
      "attribute": "emphasis",
      "description": "be emphasized in a layout",
      "usageLevel": 1,
      "separateExamples": true,
      "options": [
        {
          "name": "Primary",
          "value": "primary",
          "description": "This button should appear to be emphasized as the first action that should be taken over other options",
          "exampleCode": "<ui-button primary>Confirm</ui-button>\n<ui-button>Cancel</ui-button>"
        },
        {
          "name": "Secondary",
          "value": "secondary",
          "description": "This button should appear to be emphasized as a secondary option that should appear after other options",
          "exampleCode": "<ui-button secondary>Confirm</ui-button>\n<ui-button>Cancel</ui-button>"
        }
      ]
    },
    {
      "name": "Toggle",
      "attribute": "toggle",
      "description": "emphasize its active state",
      "usageLevel": 3,
      "exampleCode": "<ui-button toggle>Inactive</ui-button>\n<ui-button toggle active>Active</ui-button>"
    },
    {
      "name": "Animated",
      "attribute": "animated",
      "description": "animate to show hidden content",
      "includeAttributeClass": true,
      "usageLevel": 3,
      "options": [
        {
          "name": "Animated",
          "value": ["horizontal-animated"],
          "description": "formatted to animate hidden content horizontally",
          "exampleCode": "<ui-button animated>\n  <span slot=\"visible\">Hover Me</span>\n  <span slot=\"hidden\">Hidden</span>\n</ui-button>"
        },
        {
          "name": "Vertical Animated",
          "value": "vertical-animated",
          "description": "formatted to animate hidden content vertically",
          "exampleCode": "<ui-button vertical-animated>\n  <span slot=\"visible\">Hover Me</span>\n  <span slot=\"hidden\">Hidden</span>\n</ui-button>"
        },
        {
          "name": "Fade Animated",
          "value": ["fade-animated"],
          "description": "formatted to fade in hidden content",
          "exampleCode": "<ui-button fade-animated>\n  <span slot=\"visible\">Hover Me</span>\n  <span slot=\"hidden\">Hidden</span>\n</ui-button>"
        }
      ]
    }
  ],
  "states": [
    {
      "name": "Hover",
      "attribute": "hover",
      "description": "be hovered"
    },
    {
      "name": "Focus",
      "attribute": "focused",
      "description": "be focused by the keyboard"
    },
    {
      "name": "Active",
      "attribute": "active",
      "description": "be activated"
    },
    {
      "name": "Disabled",
      "attribute": "disabled",
      "includeAttributeClass": true,
      "description": "have interactions disabled",
      "options": [
        {
          "name": "Disabled",
          "value": "disabled",
          "description": "disable interactions"
        },
        {
          "name": "Clickable Disabled",
          "value": "clickable-disabled",
          "description": "allow interactions but appear disabled"
        }
      ]
    },
    {
      "name": "Loading",
      "attribute": "loading",
      "description": "indicate it is loading content"
    }
  ],
  "variations": [
    {
      "name": "Attached",
      "attribute": "attached",
      "description": "attach to other content",
      "usageLevel": 2,
      "includeAttributeClass": true,
      "options": [
        {
          "name": "Top Attached",
          "value": "top-attached",
          "description": "appear attached to the top of other content"
        },
        {
          "name": "Attached",
          "value": "attached",
          "description": "attach to content above and below"
        },
        {
          "name": "Bottom Attached",
          "value": "bottom-attached",
          "description": "attach to the bottom"
        },
        {
          "name": "Left Attached",
          "value": "left-attached",
          "description": "attach to the left"
        },
        {
          "name": "Right Attached",
          "value": "right-attached",
          "description": "attach to the right"
        }
      ]
    },
    {
      "name": "Basic",
      "attribute": "basic",
      "description": "be de-emphasized in a layout",
      "usageLevel": 2,
      "options": [
        {
          "name": "Basic",
          "value": "basic",
          "description": "appear slightly less pronounced"
        },
        {
          "name": "Very Basic",
          "value": "very-basic",
          "description": "appear much less pronounced"
        }
      ]
    },
    {
      "name": "Type",
      "attribute": "type",
      "description": "be a standard html button type",
      "usageLevel": 3,
      "options": [
        {
          "name": "Submit",
          "value": "submit",
          "description": "submit the surrounding form"
        },
        {
          "name": "Reset",
          "value": "reset",
          "description": "reset the surrounding form"
        }
      ]
    },
    {
      "name": "Circular",
      "attribute": "circular",
      "description": "be rounded like a circle",
      "usageLevel": 3
    },
    {
      "name": "Colored",
      "attribute": "color",
      "description": "be colored",
      "usageLevel": 3,
      "options": [
        {
          "name": "Red",
          "value": "red",
          "description": "red"
        },
        {
          "name": "Orange",
          "value": "orange",
          "description": "orange"
        },
        {
          "name": "Yellow",
          "value": "yellow",
          "description": "yellow"
        },
        {
          "name": "Olive",
          "value": "olive",
          "description": "olive"
        },
        {
          "name": "Green",
          "value": "green",
          "description": "green"
        },
        {
          "name": "Teal",
          "value": "teal",
          "description": "teal"
        },
        {
          "name": "Blue",
          "value": "blue",
          "description": "blue"
        },
        {
          "name": "Violet",
          "value": "violet",
          "description": "violet"
        },
        {
          "name": "Purple",
          "value": "purple",
          "description": "purple"
        },
        {
          "name": "Pink",
          "value": "pink",
          "description": "pink"
        },
        {
          "name": "Brown",
          "value": "brown",
          "description": "brown"
        },
        {
          "name": "Grey",
          "value": "grey",
          "description": "grey"
        },
        {
          "name": "Black",
          "value": "black",
          "description": "black"
        }
      ]
    },
    {
      "name": "Compact",
      "attribute": "compact",
      "usageLevel": 3,
      "description": "reduce its padding to fit into tighter spaces without adjusting its font size",
      "options": [
        {
          "name": "Compact",
          "value": "compact",
          "description": "reduce its padding slightly"
        },
        {
          "name": "Very Compact",
          "value": "very-compact",
          "description": "reduce its padding greatly"
        }
      ]
    },
    {
      "name": "Social Site",
      "attribute": "social",
      "value": "social",
      "usageLevel": 5,
      "description": "appear formatted with the brand colors of a social website",
      "includeAttributeClass": true,
      "options": [
        {
          "name": "Instagram",
          "value": "instagram",
          "description": "match the brand colors of Instagram",
          "exampleCode": "<ui-button instagram icon=\"instagram\">Instagram</ui-button>"
        },
        {
          "name": "Facebook",
          "value": "facebook",
          "description": "match the brand colors of Facebook",
          "exampleCode": "<ui-button facebook icon=\"facebook\">Facebook</ui-button>"
        },
        {
          "name": "Twitter",
          "value": "twitter",
          "description": "match the brand colors of Twitter",
          "exampleCode": "<ui-button twitter icon=\"twitter\">Twitter</ui-button>"
        },
        {
          "name": "Linkedin",
          "value": "linkedin",
          "description": "match the brand colors of LinkedIn",
          "exampleCode": "<ui-button linkedin icon=\"linkedin\">LinkedIn</ui-button>"
        },
        {
          "name": "Youtube",
          "value": "youtube",
          "description": "match the brand colors of YouTube",
          "exampleCode": "<ui-button youtube icon=\"youtube\">YouTube</ui-button>"
        }
      ]
    },
    {
      "name": "Positive",
      "attribute": "positive",
      "usageLevel": 2,
      "description": "indicate a positive action",
      "options": [
        {
          "name": "Positive",
          "value": [
            "positive"
          ],
          "description": "be positive"
        },
        {
          "name": "Subtle Positive",
          "value": "subtle-positive",
          "description": "subtly hint at a positive action"
        }
      ]
    },
    {
      "name": "Warning",
      "attribute": "warning",
      "usageLevel": 2,
      "description": "indicate a potentially dangerous action",
      "options": [
        {
          "name": "Warning",
          "value": [
            "warning"
          ],
          "description": "be dangerous"
        },
        {
          "name": "Subtle Warning",
          "value": "subtle-warning",
          "description": "subtly hint it may be dangerous"
        }
      ]
    },
    {
      "name": "Negative",
      "attribute": "negative",
      "usageLevel": 2,
      "description": "indicate a negative action",
      "options": [
        {
          "name": "Negative",
          "value": [
            "negative"
          ],
          "description": "be negative"
        },
        {
          "name": "Subtle Negative",
          "value": "subtle-negative",
          "description": "subtly hint at a negative action"
        }
      ]
    },
    {
      "name": "Info",
      "attribute": "info",
      "usageLevel": 2,
      "description": "indicate it contains information",
      "options": [
        {
          "name": "Info",
          "value": [
            "info"
          ],
          "description": "appear dangerous"
        },
        {
          "name": "Subtle Info",
          "value": "subtle-info",
          "description": "subtly hint it may be dangerous"
        }
      ]
    },
    {
      "name": "Transparent",
      "attribute": "transparent",
      "usageLevel": 2,
      "description": "appear transparent",
      "exampleCode": "<div class=\"transparent segments\">\n  <div class=\"light segment\">\n    <ui-button transparent>Transparent</ui-button>\n  </div>\n  <div class=\"dark segment\">\n    <ui-button inverted transparent>Transparent</ui-button>\n  </div>\n</div>"
    },
    {
      "name": "Floated",
      "attribute": "floated",
      "usageLevel": 1,
      "description": "align to the left or right of its container",
      "options": [
        {
          "name": "Left Floated",
          "value": [
            "left-floated"
          ],
          "description": "appear to the left of content"
        },
        {
          "name": "Right Floated",
          "value": "right-floated",
          "description": "appear to the right of content"
        }
      ]
    },
    {
      "name": "Fluid",
      "attribute": "fluid",
      "usageLevel": 1,
      "description": "take the width of its container"
    },
    {
      "name": "Size",
      "attribute": "size",
      "usageLevel": 1,
      "description": "vary in size",
      "options": [
        {
          "name": "Mini",
          "value": "mini",
          "description": "appear extremely small"
        },
        {
          "name": "Tiny",
          "value": "tiny",
          "description": "appear very small"
        },
        {
          "name": "Small",
          "value": "small",
          "description": "appear small"
        },
        {
          "name": "Medium",
          "value": "medium",
          "description": "appear normal sized"
        },
        {
          "name": "Large",
          "value": "large",
          "description": "appear larger than normal"
        },
        {
          "name": "Big",
          "value": "big",
          "description": "appear much larger than normal"
        },
        {
          "name": "Huge",
          "value": "huge",
          "description": "appear very much larger than normal"
        },
        {
          "name": "Massive",
          "value": "massive",
          "description": "appear extremely larger than normal"
        }
      ]
    },
    {
      "name": "Inverted",
      "description": "be formatted to appear on dark backgrounds",
      "usageLevel": 2,
      "attribute": "inverted"
    }
  ],
  "settings": [
    {
      "name": "Icon Only",
      "type": "boolean",
      "attribute": "icon-only",
      "defaultValue": false,
      "description": "Enable to remove spacing for text"
    },
    {
      "name": "Icon After",
      "type": "boolean",
      "attribute": "icon-after",
      "defaultValue": false,
      "description": "Enable to position the icon after the text"
    },
    {
      "name": "Link",
      "type": "string",
      "attribute": "href",
      "description": "link to a webpage"
    }
  ],
  "supportsPlural": true,
  "pluralName": "Buttons",
  "pluralTagName": "ui-buttons",
  "pluralExportName": "UIButtons",
  "pluralDescription": "Buttons can exist together as a group",
  "pluralContent": [
    {
      "name": "Or",
      "attribute": "or",
      "slot": "or",
      "description": "A button group can be formatted to show a conditional choice"
    }
  ],
  "pluralSharedTypes": [],
  "pluralOnlyTypes": [
    {
      "name": "vertical",
      "attribute": "vertical",
      "description": "A button group can be formatted to show buttons in a vertical stack",
      "usageLevel": 3
    }
  ],
  "pluralOnlyVariations": [
    {
      "name": "Separate",
      "attribute": "separate",
      "description": "A button group can appear with their buttons separated"
    },
    {
      "name": "Equal Width",
      "attribute": "equal-width",
      "description": "A button group can be formatted to have the same width for each button",
      "usageLevel": 3,
      "options": [
        {
          "name": "Two",
          "value": "two",
          "description": "A button group can have two items evenly split"
        },
        {
          "name": "Three",
          "value": "three",
          "description": "A button group can have three items evenly split"
        },
        {
          "name": "Four",
          "value": "four",
          "description": "A button group can have four items evenly split"
        },
        {
          "name": "Five",
          "value": "five",
          "description": "A button group can have five items evenly split"
        },
        {
          "name": "Six",
          "value": "six",
          "description": "A button group can have six items evenly split"
        }
      ]
    }
  ],
  "pluralSharedVariations": [
    "inverted",
    "size",
    "floated",
    "compact",
    "color",
    "attached"
  ]
}