Skip to main content Skip to docs navigation
View on Git

Button

The buttons allow users to perform an action.

Examples

examples

import { Button, ButtonIcon } from "@almacareer/seduo-design-system";
...
<Button color="primary" ariaLabel="text">Primary</Button>
<Button color="primary" ariaLabel="text">
  <ButtonIcon name="play-filled" />
  Primary
</Button>
<Button color="primary" isSymmetrical ariaLabel="text">
  <ButtonIcon name="play-filled" />
</Button>
<Button color="primary" isCircle ariaLabel="text">
  <ButtonIcon name="play-filled" />
</Button>
...
<Button color="secondary" ariaLabel="text">Secondary</Button>
<Button color="secondary" ariaLabel="text">
  <ButtonIcon name="play-filled" />
  Secondary
</Button>
<Button color="secondary" isSymmetrical ariaLabel="text">
  <ButtonIcon name="play-filled" />
</Button>
<Button color="secondary" isCircle ariaLabel="text">
  <ButtonIcon name="play-filled" />
</Button>
...
<Button color="tertiary" ariaLabel="text">Tertiary</Button>
<Button color="tertiary" ariaLabel="text">
  <ButtonIcon name="play-filled" />
  Tertiary
</Button>
<Button color="tertiary" isSymmetrical ariaLabel="text">
  <ButtonIcon name="play-filled" />
</Button>
<Button color="tertiary" isCircle ariaLabel="text">
  <ButtonIcon name="play-filled" />
</Button>
...
<Button color="success" ariaLabel="text">Success</Button>
<Button color="success" ariaLabel="text">
  <ButtonIcon name="play-filled" />
  Success
</Button>
<Button color="success" isSymmetrical ariaLabel="text">
  <ButtonIcon name="play-filled" />
</Button>
<Button color="success" isCircle ariaLabel="text">
  <ButtonIcon name="play-filled" />
</Button>
...
<Button color="danger" ariaLabel="text">Danger</Button>
<Button color="danger" ariaLabel="text">
  <ButtonIcon name="play-filled" />
  Danger
</Button>
<Button color="danger" isSymmetrical ariaLabel="text">
  <ButtonIcon name="play-filled" />
</Button>
<Button color="danger" isCircle ariaLabel="text">
  <ButtonIcon name="play-filled" />
</Button>
...
<Button color="warning" ariaLabel="text">Warning</Button>
<Button color="warning" ariaLabel="text">
  <ButtonIcon name="play-filled" />
  Warning
</Button>
<Button color="warning" isSymmetrical ariaLabel="text">
  <ButtonIcon name="play-filled" />
</Button>
<Button color="warning" isCircle ariaLabel="text">
  <ButtonIcon name="play-filled" />
</Button>
...
<Button color="informative" ariaLabel="text">Informative</Button>
<Button color="informative" ariaLabel="text">
  <ButtonIcon name="play-filled" />
  Informative
</Button>
<Button color="informative" isSymmetrical ariaLabel="text">
  <ButtonIcon name="play-filled" />
</Button>
<Button color="informative" isCircle ariaLabel="text">
  <ButtonIcon name="play-filled" />
</Button>
{% embed "@seduo-design-system/button.twig" with { props: {
    color: variant,
    'aria-label': label
}} %}
    {% block content %}
        {{ label }}
    {% endblock %}
{% endembed %}
...
{% embed "@seduo-design-system/button.twig" with { props: {
    color: variant,
    'aria-label': label
}} %}
    {% block content %}
        {% include "@seduo-design-system/buttonIcon.twig" with { props: {
            name: 'play-filled'
        } }  %}
        {{ label }}
    {% endblock %}
{% endembed %}
...
{% embed "@seduo-design-system/button.twig" with { props: {
    color: variant,
    'aria-label': label,
    isSymmetrical: true
}} %}
    {% block content %}
        {% include "@seduo-design-system/buttonIcon.twig" with { props: {
            name: 'play-filled'
        } }  %}
    {% endblock %}
{% endembed %}
...
{% embed "@seduo-design-system/button.twig" with { props: {
    color: variant,
    'aria-label': label,
    isCircle: true
}} %}
    {% block content %}
        {% include "@seduo-design-system/buttonIcon.twig" with { props: {
            name: 'play-filled'
        } }  %}
    {% endblock %}
{% endembed %}
<Button color="primary" aria-label="text">Primary</Button>
<Button color="primary" aria-label="text">
    <ButtonIcon name="play-filled" />Primary
</Button>
<Button color="primary" isSymmetrical aria-label="text">
    <ButtonIcon name="play-filled" />
</Button>
<Button color="primary" isCircle aria-label="text">
    <ButtonIcon name="play-filled" />
</Button>
...
<Button color="secondary" aria-label="text">Secondary</Button>
<Button color="secondary" aria-label="text">
    <ButtonIcon name="play-filled" />Secondary
</Button>
<Button color="secondary" isSymmetrical aria-label="text">
    <ButtonIcon name="play-filled" />
</Button>
<Button color="secondary" isCircle aria-label="text">
    <ButtonIcon name="play-filled" />
</Button>
...
<Button color="tertiary" aria-label="text">Tertiary</Button>
<Button color="tertiary" aria-label="text">
    <ButtonIcon name="play-filled" />Tertiary
</Button>
<Button color="tertiary" isSymmetrical aria-label="text">
    <ButtonIcon name="play-filled" />
</Button>
<Button color="tertiary" isCircle aria-label="text">
    <ButtonIcon name="play-filled" />
</Button>
...
<Button color="success" aria-label="text">Success</Button>
<Button color="success" aria-label="text">
    <ButtonIcon name="play-filled" />Success
</Button>
<Button color="success" isSymmetrical aria-label="text">
    <ButtonIcon name="play-filled" />
</Button>
<Button color="success" isCircle aria-label="text">
    <ButtonIcon name="play-filled" />
</Button>
...
<Button color="danger" aria-label="text">Danger</Button>
<Button color="danger" aria-label="text">
    <ButtonIcon name="play-filled" />Danger
</Button>
<Button color="danger" isSymmetrical aria-label="text">
    <ButtonIcon name="play-filled" />
</Button>
<Button color="danger" isCircle aria-label="text">
    <ButtonIcon name="play-filled" />
</Button>
...
<Button color="warning" aria-label="text">Warning</Button>
<Button color="warning" aria-label="text">
    <ButtonIcon name="play-filled" />Warning
</Button>
<Button color="warning" isSymmetrical aria-label="text">
    <ButtonIcon name="play-filled" />
</Button>
<Button color="warning" isCircle aria-label="text">
    <ButtonIcon name="play-filled" />
</Button>
...
<Button color="informative" aria-label="text">Informative</Button>
<Button color="informative" aria-label="text">
    <ButtonIcon name="play-filled" />Informative
</Button>
<Button color="informative" isSymmetrical aria-label="text">
    <ButtonIcon name="play-filled" />
</Button>
<Button color="informative" isCircle aria-label="text">
    <ButtonIcon name="play-filled" />
</Button>

API

Prop name Type Default Required Description
children ReactNode null no Content of the Button
color Action Color dictionary, Emotion Color dictionary primary no Color variant
elementType ElementType 'button' no Type of element
isBlock bool false no Span the element to the full width of its parent
isDisabled bool false no If true, Button is disabled
isLoading bool false no If true, Button is in a loading state, disabled and the Spinner is visible
isSymmetrical bool false no If true, Button is square, usually only with an Icon
isCircle bool false no If true, Button is circle, usually only with an Icon
name string - no For use a button as a form data reference
onClick React.MouseEventHandler, string null no JS function to call on click
ref ForwardedRef<HTMLButtonElement> - no Button element reference
size Size dictionary medium no Size variant
type string button no Type of the Button
UNSAFE_className string - no Wrapper custom classname

ButtonIcon properties

the ButtonIcon component is created to define the button with the icon

Prop name Type Default Required Description
name string - yes its possible to use all icons

Button Sizes

Buttons come in this sizes

examples

<Button color="primary" size="large" ariaLabel="label">
  Button Large
</Button>
<Button color="primary" ariaLabel="label">Button Regular</Button>
<Button color="primary" size="small" ariaLabel="label">
  Button Small
</Button>
...
<Button color="secondary" size="large" ariaLabel="label">
  <ButtonIcon name="BoxArrowDown" />
  Button Large
</Button>
<Button color="secondary" ariaLabel="label">
  <ButtonIcon name="BoxArrowDown" />
  Button Regular
</Button>
<Button color="secondary" size="small" ariaLabel="label">
  <ButtonIcon name="BoxArrowDown" />
  Button Small
</Button>
...
<Button color="secondary" size="large" isSymmetrical ariaLabel="label">
  <ButtonIcon name="BoxArrowDown" />
</Button>
<Button color="secondary" isSymmetrical ariaLabel="label">
  <ButtonIcon name="BoxArrowDown" />
</Button>
<Button color="secondary" size="small" isSymmetrical ariaLabel="label">
  <ButtonIcon name="BoxArrowDown" />
</Button>
...
<Button color="secondary" size="large" isCircle ariaLabel="label">
  <ButtonIcon name="BoxArrowDown" />
</Button>
<Button color="secondary" isCircle ariaLabel="label">
  <ButtonIcon name="BoxArrowDown" />
</Button>
<Button color="secondary" size="small" isCircle ariaLabel="label">
  <ButtonIcon name="BoxArrowDown" />
</Button>
<Button color="primary" size="large" aria-label="label">Button Large</Button>
<Button color="primary" aria-label="label">Button Regular</Button>
<Button color="primary" size="small" aria-label="label">Button Small</Button>
...
<Button color="secondary" size="large" aria-label="label">
    <ButtonIcon name="BoxArrowDown" />Button Large
</Button>
<Button color="secondary" aria-label="label">
    <ButtonIcon name="BoxArrowDown" />Button Regular
</Button>
<Button color="secondary" size="small" aria-label="label">
    <ButtonIcon name="BoxArrowDown" />Button Small
</Button>
...
<Button color="secondary" size="large" isSymmetrical aria-label="label">
    <ButtonIcon name="BoxArrowDown" />
</Button>
<Button color="secondary" isSymmetrical aria-label="label">
    <ButtonIcon name="BoxArrowDown" />
</Button>
<Button color="secondary" size="small" isSymmetrical aria-label="label">
    <ButtonIcon name="BoxArrowDown" />
</Button>
...
<Button color="secondary" size="large" isCircle aria-label="label">
    <ButtonIcon name="BoxArrowDown" />
</Button>
<Button color="secondary" isCircle aria-label="label">
    <ButtonIcon name="BoxArrowDown" />
</Button>
<Button color="secondary" size="small" isCircle aria-label="label">
    <ButtonIcon name="BoxArrowDown" />
</Button>

For more information see Button component. Button also contain all the appropriate attributes according to the type of element. The default element type for Button is <button>.

On this page