ux-button

This renders a button

Read Foundation's button docs for more details.


Use Cases Manifest Alert ButtonAttributesDefault ButtonDisabled ButtonExpand ButtonAnchor ButtonInfo ButtonLarge ButtonRadius ButtonRound ButtonSecondary ButtonSmall ButtonSuccess ButtonTiny Button
    {{#events.uxButton_16}}
  • {{this}}
  • {{/}}

	{
    "text": "Alert Button",
    "class": "alert"
}
    {{#events.uxButton_17}}
  • {{this}}
  • {{/}}

	{
    "text": "Attributes!",
    "role": "button",
    "arialabel": "somelabel",
    "tabindex": 10,
    "onclick": "BuyBuyBuy"
}
    {{#events.uxButton_18}}
  • {{this}}
  • {{/}}

	{
    "text": "Default Button"
}
    {{#events.uxButton_19}}
  • {{this}}
  • {{/}}

	{
    "text": "Disabled Button",
    "class": "disabled",
    "disabled": "true"
}
    {{#events.uxButton_20}}
  • {{this}}
  • {{/}}

	{
    "text": "Expand Button",
    "class": "expand"
}
    {{#events.uxButton_21}}
  • {{this}}
  • {{/}}

	{
    "text": "Anchor Button",
    "href": "#"
}
    {{#events.uxButton_22}}
  • {{this}}
  • {{/}}

	{
    "text": "Info Button",
    "class": "info"
}
    {{#events.uxButton_23}}
  • {{this}}
  • {{/}}

	{
    "text": "Large Button",
    "class": "large"
}
    {{#events.uxButton_24}}
  • {{this}}
  • {{/}}

	{
    "text": "Radius Button",
    "class": "radius"
}
    {{#events.uxButton_25}}
  • {{this}}
  • {{/}}

	{
    "text": "Round Button",
    "class": "round"
}
    {{#events.uxButton_26}}
  • {{this}}
  • {{/}}

	{
    "text": "Secondary Button",
    "class": "secondary"
}
    {{#events.uxButton_27}}
  • {{this}}
  • {{/}}

	{
    "text": "Small Button",
    "class": "small"
}
    {{#events.uxButton_28}}
  • {{this}}
  • {{/}}

	{
    "text": "Success Button",
    "class": "success"
}
    {{#events.uxButton_29}}
  • {{this}}
  • {{/}}

	{
    "text": "Tiny Button",
    "class": "tiny"
}
Semantic Event Mapping
onclick - Event to fire when button is clicked


Semantic Data Model
text - The text to display on the button
href - The link to follow when the button is clicked
role - The role of the button
arialabel - Accessibility label
tabindex - Tabable index of the element