toolbar-button.component.yml

# This is so your IDE knows about the syntax for fixes and autocomplete.
$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json

# The human readable name.
name: Toolbar button

# Status can be: "experimental", "stable", "deprecated", "obsolete".
status: experimental

# Schema for the props. We support www.json-schema.org. Learn more about the
# syntax there.
props:
  # Props are always an object with keys. Each key is a variable in your
  # component template.
  type: object

  properties:
    action:
      type: string
      title: Action
      description: Hidden button action text.
    modifiers:
      type: array
      title: Modifier classes.
      description:
        Button modifiers.
        https://en.bem.info/methodology/css/#modifiers
      items:
        type: string
        enum:
          - collapsible
          - dark
          - expand--down
          - expand--side
          - large
          - non-interactive
          - primary
          - small-offset
          - weight--400
        meta:enum:
          collapsible: Collapsible
          dark: Dark
          expand--down: Expands down
          expand--side: Expands to the side
          large: Large
          non-interactive: Non-Interactive
          primary: Primary
          small-offset: Small offset
          weight--400: Weight 400
        x-translation-context:  Toolbar button modifiers
    extra_classes:
      type: array
      title: Extra classes.
      description:
        External modifiers added from the placement context.
        https://en.bem.info/methodology/css/#mixes
      items:
        type: string
    html_tag:
      type: string
      title: HTML tag
      # Limit the available options by using enums.
      enum:
        - a
        - button
        - span
      meta:enum:
        a: Link
        button: Button
        span: Inline
      x-translation-context: HTML tag
      # Provide a default value
      default: button
    icon:
      title: Icon
      type: object
      properties:
        pack_id:
          title: Icon Pack
          type: string
          default: navigation
        icon_id:
          title: Icon ID
          type: string
        settings:
          title: Icon Settings
          type: object
          default:
            class: toolbar-button__icon
            size: 20
      required:
        - icon_id
    text:
      title: Text
      description: Text of button.
      type: string
slots:
  content:
    title: Content
    description: Content of button.