Serendie Design System

https://serendie.design
Admin
Serendie Design System is an open design system by Mitsubishi Electric, designed to connect diverse...
Tokens:2,438
Snippets:17
Trust Score:5.9
Update:1 year ago
Show doc for...
Tokens:
Raw
### Implementing Toast Variations in Serendie UI with React

Source: https://serendie.design/components/toast

This React component demonstrates how to create and display different types of Toast notifications (Default, Success, Error) using the `@serendie/ui` library. It shows how to use the `toaster.create` method to configure toast messages with titles and durations, triggered by button clicks.

```TypeScript
import { Button, Toast, toaster } from "@serendie/ui";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function ToastSample() {
  return (
    <Dl>
      <Dt>Default</Dt>
      <Dd>
        <Button
          styleType="outlined"
          onClick={() =>
            toaster.create({
              title: "お知らせメッセージ",
              duration: 1500,
            })
          }
        >
          Show Toast
        </Button>
        <Toast toaster={toaster} />
      </Dd>
      <Dt>Success</Dt>
      <Dd>
        <Button
          styleType="outlined"
          onClick={() =>
            toaster.create({
              type: "success",
              title: "成功しました",
              duration: 1500,
            })
          }
        >
          Show Toast
        </Button>
        <Toast toaster={toaster} />
      </Dd>
      <Dt>Error</Dt>
      <Dd>
        <Button
          styleType="outlined"
          onClick={() =>
            toaster.create({
              type: "error",
              title: "エラーがあります",
              duration: 1500,
            })
          }
        >
          Show Toast
        </Button>
        <Toast toaster={toaster} />
      </Dd>
    </Dl>
  );
}
```

--------------------------------

### Define Typography Label Small Compact Token

Source: https://serendie.design/foundations/design-tokens/system-tokens

Defines the `small_compact` design token for label typography. This token specifies the font size as `sd.reference.typography.scale.compact.extraSmall`, font weight as `regular`, primary font family, and no line height, suitable for compact layouts.

```APIDOC
sd.system.typography.label.small_compact:
  fontSize: sd.reference.typography.scale.compact.extraSmall
  fontWeight: sd.reference.typography.fontWeight.regular
  fontFamily: sd.reference.typography.fontFamily.primary
  lineHeight: sd.reference.typography.lineHeight.none
```

--------------------------------

### Define Typography Body Extra Small Compact Token

Source: https://serendie.design/foundations/design-tokens/system-tokens

Defines the `extraSmall_compact` design token for body typography. This token specifies the font size as `sd.reference.typography.scale.compact.small`, font weight as `regular`, primary font family, and a `tight` line height, suitable for compact layouts.

```APIDOC
sd.system.typography.body.extraSmall_compact:
  fontSize: sd.reference.typography.scale.compact.small
  fontWeight: sd.reference.typography.fontWeight.regular
  fontFamily: sd.reference.typography.fontFamily.primary
  lineHeight: sd.reference.typography.lineHeight.tight
```

--------------------------------

### Define Typography Body Small Compact Token

Source: https://serendie.design/foundations/design-tokens/system-tokens

Defines the `small_compact` design token for body typography. This token specifies the font size as `sd.reference.typography.scale.compact.medium`, font weight as `regular`, primary font family, and a `normal` line height, suitable for compact layouts.

```APIDOC
sd.system.typography.body.small_compact:
  fontSize: sd.reference.typography.scale.compact.medium
  fontWeight: sd.reference.typography.fontWeight.regular
  fontFamily: sd.reference.typography.fontFamily.primary
  lineHeight: sd.reference.typography.lineHeight.normal
```

--------------------------------

### Define Typography Label Medium Compact Token

Source: https://serendie.design/foundations/design-tokens/system-tokens

Defines the `medium_compact` design token for label typography. This token specifies the font size as `sd.reference.typography.scale.compact.small`, font weight as `regular`, primary font family, and no line height, suitable for compact layouts.

```APIDOC
sd.system.typography.label.medium_compact:
  fontSize: sd.reference.typography.scale.compact.small
  fontWeight: sd.reference.typography.fontWeight.regular
  fontFamily: sd.reference.typography.fontFamily.primary
  lineHeight: sd.reference.typography.lineHeight.none
```

--------------------------------

### Define Typography Label Extra Large Compact Token

Source: https://serendie.design/foundations/design-tokens/system-tokens

Defines the `extraLarge_compact` design token for label typography. This token specifies the font size as `sd.reference.typography.scale.compact.large`, font weight as `regular`, primary font family, and no line height, suitable for compact layouts.

```APIDOC
sd.system.typography.label.extraLarge_compact:
  fontSize: sd.reference.typography.scale.compact.large
  fontWeight: sd.reference.typography.fontWeight.regular
  fontFamily: sd.reference.typography.fontFamily.primary
  lineHeight: sd.reference.typography.lineHeight.none
```

--------------------------------

### Define Typography Body Small Expanded Token

Source: https://serendie.design/foundations/design-tokens/system-tokens

Defines the `small_expanded` design token for body typography. This token specifies the font size as `sd.reference.typography.scale.expanded.extraSmall`, font weight as `regular`, primary font family, and a `normal` line height, suitable for expanded layouts.

```APIDOC
sd.system.typography.body.small_expanded:
  fontSize: sd.reference.typography.scale.expanded.extraSmall
  fontWeight: sd.reference.typography.fontWeight.regular
  fontFamily: sd.reference.typography.fontFamily.primary
  lineHeight: sd.reference.typography.lineHeight.normal
```

--------------------------------

### Define Typography Body Medium Compact Token

Source: https://serendie.design/foundations/design-tokens/system-tokens

Defines the `medium_compact` design token for body typography. This token specifies the font size as `sd.reference.typography.scale.compact.large`, font weight as `regular`, primary font family, and a `normal` line height, suitable for compact layouts.

```APIDOC
sd.system.typography.body.medium_compact:
  fontSize: sd.reference.typography.scale.compact.large
  fontWeight: sd.reference.typography.fontWeight.regular
  fontFamily: sd.reference.typography.fontFamily.primary
  lineHeight: sd.reference.typography.lineHeight.normal
```

--------------------------------

### Define Typography Label Large Compact Token

Source: https://serendie.design/foundations/design-tokens/system-tokens

Defines the `large_compact` design token for label typography. This token specifies the font size as `sd.reference.typography.scale.compact.medium`, font weight as `regular`, primary font family, and no line height, suitable for compact layouts.

```APIDOC
sd.system.typography.label.large_compact:
  fontSize: sd.reference.typography.scale.compact.medium
  fontWeight: sd.reference.typography.fontWeight.regular
  fontFamily: sd.reference.typography.fontFamily.primary
  lineHeight: sd.reference.typography.lineHeight.none
```

--------------------------------

### Define Typography Label Small Expanded Token

Source: https://serendie.design/foundations/design-tokens/system-tokens

Defines the `small_expanded` design token for label typography. This token specifies the font size as `sd.reference.typography.scale.expanded.threeExtraSmall`, font weight as `regular`, primary font family, and no line height, suitable for expanded layouts.

```APIDOC
sd.system.typography.label.small_expanded:
  fontSize: sd.reference.typography.scale.expanded.threeExtraSmall
  fontWeight: sd.reference.typography.fontWeight.regular
  fontFamily: sd.reference.typography.fontFamily.primary
  lineHeight: sd.reference.typography.lineHeight.none
```

--------------------------------

### Define Typography Body Medium Expanded Token

Source: https://serendie.design/foundations/design-tokens/system-tokens

Defines the `medium_expanded` design token for body typography. This token specifies the font size as `sd.reference.typography.scale.expanded.small`, font weight as `regular`, primary font family, and a `normal` line height, suitable for expanded layouts.

```APIDOC
sd.system.typography.body.medium_expanded:
  fontSize: sd.reference.typography.scale.expanded.small
  fontWeight: sd.reference.typography.fontWeight.regular
  fontFamily: sd.reference.typography.fontFamily.primary
  lineHeight: sd.reference.typography.lineHeight.normal
```

--------------------------------

### Define Typography Body Extra Small Expanded Token

Source: https://serendie.design/foundations/design-tokens/system-tokens

Defines the `extraSmall_expanded` design token for body typography. This token specifies the font size as `sd.reference.typography.scale.expanded.twoExtraSmall`, font weight as `regular`, primary font family, and a `tight` line height, suitable for expanded layouts.

```APIDOC
sd.system.typography.body.extraSmall_expanded:
  fontSize: sd.reference.typography.scale.expanded.twoExtraSmall
  fontWeight: sd.reference.typography.fontWeight.regular
  fontFamily: sd.reference.typography.fontFamily.primary
  lineHeight: sd.reference.typography.lineHeight.tight
```

--------------------------------

### Define Typography Body Large Compact Token

Source: https://serendie.design/foundations/design-tokens/system-tokens

Defines the `large_compact` design token for body typography. This token specifies the font size as `sd.reference.typography.scale.compact.extraLarge`, font weight as `regular`, primary font family, and a `normal` line height, suitable for compact layouts.

```APIDOC
sd.system.typography.body.large_compact:
  fontSize: sd.reference.typography.scale.compact.extraLarge
  fontWeight: sd.reference.typography.fontWeight.regular
  fontFamily: sd.reference.typography.fontFamily.primary
  lineHeight: sd.reference.typography.lineHeight.normal
```

--------------------------------

### Define Typography Label Medium Expanded Token

Source: https://serendie.design/foundations/design-tokens/system-tokens

Defines the `medium_expanded` design token for label typography. This token specifies the font size as `sd.reference.typography.scale.expanded.twoExtraSmall`, font weight as `regular`, primary font family, and no line height, suitable for expanded layouts.

```APIDOC
sd.system.typography.label.medium_expanded:
  fontSize: sd.reference.typography.scale.expanded.twoExtraSmall
  fontWeight: sd.reference.typography.fontWeight.regular
  fontFamily: sd.reference.typography.fontFamily.primary
  lineHeight: sd.reference.typography.lineHeight.none
```

--------------------------------

### Define Typography Label Extra Large Expanded Token

Source: https://serendie.design/foundations/design-tokens/system-tokens

Defines the `extraLarge_expanded` design token for label typography. This token specifies the font size as `sd.reference.typography.scale.expanded.small`, font weight as `regular`, primary font family, and no line height, suitable for expanded layouts.

```APIDOC
sd.system.typography.label.extraLarge_expanded:
  fontSize: sd.reference.typography.scale.expanded.small
  fontWeight: sd.reference.typography.fontWeight.regular
  fontFamily: sd.reference.typography.fontFamily.primary
  lineHeight: sd.reference.typography.lineHeight.none
```

--------------------------------

### Define Typography Label Large Expanded Token

Source: https://serendie.design/foundations/design-tokens/system-tokens

Defines the `large_expanded` design token for label typography. This token specifies the font size as `sd.reference.typography.scale.expanded.extraSmall`, font weight as `regular`, primary font family, and no line height, suitable for expanded layouts.

```APIDOC
sd.system.typography.label.large_expanded:
  fontSize: sd.reference.typography.scale.expanded.extraSmall
  fontWeight: sd.reference.typography.fontWeight.regular
  fontFamily: sd.reference.typography.fontFamily.primary
  lineHeight: sd.reference.typography.lineHeight.none
```

--------------------------------

### Define Typography Body Large Expanded Token

Source: https://serendie.design/foundations/design-tokens/system-tokens

Defines the `large_expanded` design token for body typography. This token specifies the font size as `sd.reference.typography.scale.expanded.medium`, font weight as `regular`, primary font family, and a `normal` line height, suitable for expanded layouts.

```APIDOC
sd.system.typography.body.large_expanded:
  fontSize: sd.reference.typography.scale.expanded.medium
  fontWeight: sd.reference.typography.fontWeight.regular
  fontFamily: sd.reference.typography.fontFamily.primary
  lineHeight: sd.reference.typography.lineHeight.normal
```
Tokens:
Raw