View on Git

Button

The buttons allow users to perform an action.

Examples

import { Button, ButtonIcon } from "@seduo/design-system";
...
<Button color="primary">Primary</Button>
<Button color="primary">
  <ButtonIcon name="play-filled" />
  Primary
</Button>
<Button color="primary" isSquare>
  <ButtonIcon name="play-filled" />
</Button>
...
<Button color="secondary">Secondary</Button>
<Button color="secondary">
  <ButtonIcon name="play-filled" />
  Secondary
</Button>
<Button color="secondary" isSquare>
  <ButtonIcon name="play-filled" />
</Button>
...
<Button color="tertiary">Tertiary</Button>
<Button color="tertiary">
  <ButtonIcon name="play-filled" />
  Tertiary
</Button>
<Button color="tertiary" isSquare>
  <ButtonIcon name="play-filled" />
</Button>
...
<Button color="success">Success</Button>
<Button color="success">
  <ButtonIcon name="play-filled" />
  Success
</Button>
<Button color="success" isSquare>
  <ButtonIcon name="play-filled" />
</Button>
...
<Button color="danger">Danger</Button>
<Button color="danger">
  <ButtonIcon name="play-filled" />
  Danger
</Button>
<Button color="danger" isSquare>
  <ButtonIcon name="play-filled" />
</Button>
...
<Button color="warning">Warning</Button>
<Button color="warning">
  <ButtonIcon name="play-filled" />
  Warning
</Button>
<Button color="warning" isSquare>
  <ButtonIcon name="play-filled" />
</Button>
...
<Button color="informative">Informative</Button>
<Button color="informative">
  <ButtonIcon name="play-filled" />
  Informative
</Button>
<Button color="informative" isSquare>
  <ButtonIcon name="play-filled" />
</Button>

{% embed "@seduo-design-system/button.twig" with { props: {
    color: variant,
    ariaLabel: label
}} %}
    {% block content %}
        {{ label }}
    {% endblock %}
{% endembed %}
...
{% embed "@seduo-design-system/button.twig" with { props: {
    color: variant,
    ariaLabel: 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,
    ariaLabel: label,
    isSquare: true
}} %}
    {% block content %}
        {% include "@seduo-design-system/buttonIcon.twig" with { props: {
            name: 'play-filled'
        } }  %}
    {% endblock %}
{% endembed %}

<Button color="primary">Primary</Button>
<Button color="primary">
    <ButtonIcon name="play-filled" />Primary
</Button>
<Button color="primary" isSquare>
    <ButtonIcon name="play-filled" />
</Button>
...
<Button color="secondary">Secondary</Button>
<Button color="secondary">
    <ButtonIcon name="play-filled" />Secondary
</Button>
<Button color="secondary" isSquare>
    <ButtonIcon name="play-filled" />
</Button>
...
<Button color="tertiary">Tertiary</Button>
<Button color="tertiary">
    <ButtonIcon name="play-filled" />Tertiary
</Button>
<Button color="tertiary" isSquare>
    <ButtonIcon name="play-filled" />
</Button>
...
<Button color="success">Success</Button>
<Button color="success">
    <ButtonIcon name="play-filled" />Success
</Button>
<Button color="success" isSquare>
    <ButtonIcon name="play-filled" />
</Button>
...
<Button color="danger">Danger</Button>
<Button color="danger">
    <ButtonIcon name="play-filled" />Danger
</Button>
<Button color="danger" isSquare>
    <ButtonIcon name="play-filled" />
</Button>
...
<Button color="warning">Warning</Button>
<Button color="warning">
    <ButtonIcon name="play-filled" />Warning
</Button>
<Button color="warning" isSquare>
    <ButtonIcon name="play-filled" />
</Button>
...
<Button color="informative">Informative</Button>
<Button color="informative">
    <ButtonIcon name="play-filled" />Informative
</Button>
<Button color="informative" isSquare>
    <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
`isSquare`	`bool`	`false`	no	If true, Button is square, 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

import { Button, ButtonIcon } from '@seduo/design-system';
...
<Button color="primary" size="large">Button Large</Button>
<Button color="primary">Button Regular</Button>
<Button color="primary" size="small">Button Small</Button>
...
<Button color="secondary" size="large">
    <ButtonIcon name="BoxArrowDown" />Button Large
</Button>
<Button color="secondary">
    <ButtonIcon name="BoxArrowDown" />Button Regular
</Button>
<Button color="secondary" size="small">
    <ButtonIcon name="BoxArrowDown" />Button Small
</Button>
...
<Button color="secondary" size="large" isSquare>
    <ButtonIcon name="BoxArrowDown" />
</Button>
<Button color="secondary" isSquare>
    <ButtonIcon name="BoxArrowDown" />
</Button>
<Button color="secondary" size="small" isSquare>
    <ButtonIcon name="BoxArrowDown" />
</Button>

<Button color="primary" size="large">Button Large</Button>
<Button color="primary">Button Regular</Button>
<Button color="primary" size="small">Button Small</Button>
...
<Button color="secondary" size="large">
    <ButtonIcon name="BoxArrowDown" />Button Large
</Button>
<Button color="secondary">
    <ButtonIcon name="BoxArrowDown" />Button Regular
</Button>
<Button color="secondary" size="small">
    <ButtonIcon name="BoxArrowDown" />Button Small
</Button>
...
<Button color="secondary" size="large" isSquare>
    <ButtonIcon name="BoxArrowDown" />
</Button>
<Button color="secondary" isSquare>
    <ButtonIcon name="BoxArrowDown" />
</Button>
<Button color="secondary" size="small" isSquare>
    <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