Freie Grundschule Pfefferwerk - Frontend Design

Buttons All 

<!--
    Buttons
-->
<p>
    <button class="c-button c-button--primary">
    Button primary
</button>

    <button class="c-button c-button--primary" disabled>
    Button primary disabled
</button>

</p>
<p>
    <button class="c-button c-button--secondary">
    Button secondary
</button>

    <button class="c-button c-button--secondary" disabled>
    Button secondary disabled
</button>

</p>
<p>
    <button class="c-button c-button--positive">
    Button positive
</button>

    <button class="c-button c-button--positive" disabled>
    Button positive disabled
</button>

</p>
<p>
    <button class="c-button c-button--caution">
    Button caution
</button>

    <button class="c-button c-button--caution" disabled>
    Button caution disabled
</button>

</p>
<p>
    <button class="c-button c-button--negative">
    Button negative
</button>

    <button class="c-button c-button--negative" disabled>
    Button negative disabled
</button>

</p>
<p>
    <button class="c-button c-button--ghost">
    Button ghost
</button>

    <button class="c-button c-button--ghost" disabled>
    Button ghost disabled
</button>

</p>
<p>
    <button class="c-button c-button--small c-button--primary">
    Button small
</button>

    <button class="c-button c-button--large c-button--primary">
    Button large
</button>

</p>

<!--
    Buttons icon only
-->
<p>
    <button class="c-button c-button--primary c-button--icon"><svg width="32" height="32" viewBox="0 0 32 32" class="o-icons o-icons--edit" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#edit"></use>
</svg>
</button>

    <button class="c-button c-button--primary c-button--icon" disabled><svg width="32" height="32" viewBox="0 0 32 32" class="o-icons o-icons--edit" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#edit"></use>
</svg>
</button>

</p>
<p>
    <button class="c-button c-button--secondary c-button--icon"><svg width="32" height="32" viewBox="0 0 32 32" class="o-icons o-icons--edit" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#edit"></use>
</svg>
</button>

    <button class="c-button c-button--secondary c-button--icon" disabled><svg width="32" height="32" viewBox="0 0 32 32" class="o-icons o-icons--edit" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#edit"></use>
</svg>
</button>

</p>
<p>
    <button class="c-button c-button--positive c-button--icon"><svg width="32" height="32" viewBox="0 0 32 32" class="o-icons o-icons--edit" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#edit"></use>
</svg>
</button>

    <button class="c-button c-button--positive c-button--icon" disabled><svg width="32" height="32" viewBox="0 0 32 32" class="o-icons o-icons--edit" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#edit"></use>
</svg>
</button>

</p>
<p>
    <button class="c-button c-button--caution c-button--icon"><svg width="32" height="32" viewBox="0 0 32 32" class="o-icons o-icons--edit" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#edit"></use>
</svg>
</button>

    <button class="c-button c-button--caution c-button--icon" disabled><svg width="32" height="32" viewBox="0 0 32 32" class="o-icons o-icons--edit" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#edit"></use>
</svg>
</button>

</p>
<p>
    <button class="c-button c-button--negative c-button--icon"><svg width="32" height="32" viewBox="0 0 32 32" class="o-icons o-icons--edit" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#edit"></use>
</svg>
</button>

    <button class="c-button c-button--negative c-button--icon" disabled><svg width="32" height="32" viewBox="0 0 32 32" class="o-icons o-icons--edit" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#edit"></use>
</svg>
</button>

</p>
<p>
    <button class="c-button c-button--ghost c-button--icon"><svg width="32" height="32" viewBox="0 0 32 32" class="o-icons o-icons--edit" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#edit"></use>
</svg>
</button>

    <button class="c-button c-button--ghost c-button--icon" disabled><svg width="32" height="32" viewBox="0 0 32 32" class="o-icons o-icons--edit" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#edit"></use>
</svg>
</button>

</p>

<!--
    Buttons with icon
-->
<p>
    <button class="c-button c-button--primary c-button--with-icon"><svg width="32" height="32" viewBox="0 0 32 32" class="o-icons o-icons--edit" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#edit"></use>
</svg>
Button primary</button>

    <button class="c-button c-button--primary c-button--with-icon" disabled><svg width="32" height="32" viewBox="0 0 32 32" class="o-icons o-icons--edit" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#edit"></use>
</svg>
Button primary disabled</button>

</p>
<p>
    <button class="c-button c-button--secondary c-button--with-icon"><svg width="32" height="32" viewBox="0 0 32 32" class="o-icons o-icons--edit" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#edit"></use>
</svg>
Button secondary</button>

    <button class="c-button c-button--secondary c-button--with-icon" disabled><svg width="32" height="32" viewBox="0 0 32 32" class="o-icons o-icons--edit" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#edit"></use>
</svg>
Button secondary disabled</button>

</p>
<p>
    <button class="c-button c-button--positive c-button--with-icon"><svg width="32" height="32" viewBox="0 0 32 32" class="o-icons o-icons--edit" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#edit"></use>
</svg>
Button positive</button>

    <button class="c-button c-button--positive c-button--with-icon" disabled><svg width="32" height="32" viewBox="0 0 32 32" class="o-icons o-icons--edit" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#edit"></use>
</svg>
Button positive disabled</button>

</p>
<p>
    <button class="c-button c-button--caution c-button--with-icon"><svg width="32" height="32" viewBox="0 0 32 32" class="o-icons o-icons--edit" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#edit"></use>
</svg>
Button caution</button>

    <button class="c-button c-button--caution c-button--with-icon" disabled><svg width="32" height="32" viewBox="0 0 32 32" class="o-icons o-icons--edit" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#edit"></use>
</svg>
Button caution disabled</button>

</p>
<p>
    <button class="c-button c-button--negative c-button--with-icon"><svg width="32" height="32" viewBox="0 0 32 32" class="o-icons o-icons--edit" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#edit"></use>
</svg>
Button negative</button>

    <button class="c-button c-button--negative c-button--with-icon" disabled><svg width="32" height="32" viewBox="0 0 32 32" class="o-icons o-icons--edit" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#edit"></use>
</svg>
Button negative disabled</button>

</p>
<p>
    <button class="c-button c-button--ghost c-button--with-icon"><svg width="32" height="32" viewBox="0 0 32 32" class="o-icons o-icons--edit" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#edit"></use>
</svg>
Button ghost</button>

    <button class="c-button c-button--ghost c-button--with-icon" disabled><svg width="32" height="32" viewBox="0 0 32 32" class="o-icons o-icons--edit" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#edit"></use>
</svg>
Button ghost disabled</button>

</p>

<!--
    Buttons styled like a link
-->
<p>
    <button class="c-button c-button--link">Button link</button>

</p>
<p>
    <button class="c-button c-button--link" disabled>Button link disabled</button>

</p>
<p>
    <button class="c-button c-button--link c-button--link-with-icon"><svg width="32" height="32" viewBox="0 0 32 32" class="o-icons o-icons--edit" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#edit"></use>
</svg>
Button link</button>

</p>
<p>
    <button class="c-button c-button--link c-button--link-with-icon" disabled><svg width="32" height="32" viewBox="0 0 32 32" class="o-icons o-icons--edit" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#edit"></use>
</svg>
Button link disabled</button>

</p>
 
<!--
    Buttons
-->
<p>
    {{render '@button' primary}}
    {{render '@button' primaryDisabled}}
</p>
<p>
    {{render '@button' secondary}}
    {{render '@button' secondaryDisabled}}
</p>
<p>
    {{render '@button' positive}}
    {{render '@button' positiveDisabled}}
</p>
<p>
    {{render '@button' caution}}
    {{render '@button' cautionDisabled}}
</p>
<p>
    {{render '@button' negative}}
    {{render '@button' negativeDisabled}}
</p>
<p>
    {{render '@button' ghost}}
    {{render '@button' ghostDisabled}}
</p>
<p>
    {{render '@button' small}}
    {{render '@button' large}}
</p>



<!--
    Buttons icon only
-->
<p>
    {{render '@button-icon' primary}}
    {{render '@button-icon' primaryDisabled}}
</p>
<p>
    {{render '@button-icon' secondary}}
    {{render '@button-icon' secondaryDisabled}}
</p>
<p>
    {{render '@button-icon' positive}}
    {{render '@button-icon' positiveDisabled}}
</p>
<p>
    {{render '@button-icon' caution}}
    {{render '@button-icon' cautionDisabled}}
</p>
<p>
    {{render '@button-icon' negative}}
    {{render '@button-icon' negativeDisabled}}
</p>
<p>
    {{render '@button-icon' ghost}}
    {{render '@button-icon' ghostDisabled}}
</p>



<!--
    Buttons with icon
-->
<p>
    {{render '@button-with-icon' primary}}
    {{render '@button-with-icon' primaryDisabled}}
</p>
<p>
    {{render '@button-with-icon' secondary}}
    {{render '@button-with-icon' secondaryDisabled}}
</p>
<p>
    {{render '@button-with-icon' positive}}
    {{render '@button-with-icon' positiveDisabled}}
</p>
<p>
    {{render '@button-with-icon' caution}}
    {{render '@button-with-icon' cautionDisabled}}
</p>
<p>
    {{render '@button-with-icon' negative}}
    {{render '@button-with-icon' negativeDisabled}}
</p>
<p>
    {{render '@button-with-icon' ghost}}
    {{render '@button-with-icon' ghostDisabled}}
</p>



<!--
    Buttons styled like a link
-->
<p>
    {{render '@button-link' link}}
</p>
<p>
    {{render '@button-link' linkDisabled}}
</p>
<p>
    {{render '@button-link-with-icon' link}}
</p>
<p>
    {{render '@button-link-with-icon' linkDisabled}}
</p>
 
{
  "primary": {
    "buttonDisabled": null,
    "buttonModifier": "primary",
    "buttonLabel": "Button primary"
  },
  "primaryDisabled": {
    "buttonDisabled": true,
    "buttonModifier": "primary",
    "buttonLabel": "Button primary disabled"
  },
  "secondary": {
    "buttonModifier": "secondary",
    "buttonLabel": "Button secondary"
  },
  "secondaryDisabled": {
    "buttonDisabled": true,
    "buttonModifier": "secondary",
    "buttonLabel": "Button secondary disabled"
  },
  "positive": {
    "buttonModifier": "positive",
    "buttonLabel": "Button positive"
  },
  "positiveDisabled": {
    "buttonDisabled": true,
    "buttonModifier": "positive",
    "buttonLabel": "Button positive disabled"
  },
  "caution": {
    "buttonModifier": "caution",
    "buttonLabel": "Button caution"
  },
  "cautionDisabled": {
    "buttonDisabled": true,
    "buttonModifier": "caution",
    "buttonLabel": "Button caution disabled"
  },
  "negative": {
    "buttonModifier": "negative",
    "buttonLabel": "Button negative"
  },
  "negativeDisabled": {
    "buttonDisabled": true,
    "buttonModifier": "negative",
    "buttonLabel": "Button negative disabled"
  },
  "ghost": {
    "buttonModifier": "ghost",
    "buttonLabel": "Button ghost"
  },
  "ghostDisabled": {
    "buttonDisabled": true,
    "buttonModifier": "ghost",
    "buttonLabel": "Button ghost disabled"
  },
  "small": {
    "buttonModifier": "small c-button--primary",
    "buttonLabel": "Button small"
  },
  "large": {
    "buttonModifier": "large c-button--primary",
    "buttonLabel": "Button large"
  },
  "link": {
    "buttonModifier": "link",
    "buttonLabel": "Button link"
  },
  "linkDisabled": {
    "buttonDisabled": true,
    "buttonModifier": "link",
    "buttonLabel": "Button link disabled"
  }
}

There are no notes for this item.