<prefab name="Button" type="">
  <asset type="truetype" name="font_main" />

  <!-- <asset type="texture" name="button_background_50_inactive" />
  <asset type="texture" name="button_background_50" />
  <asset type="texture" name="button_background_75_inactive" />
  <asset type="texture" name="button_background_75" />
  <asset type="texture" name="button_background_inactive" /> -->
  <asset type="texture" name="button_background" />
  <asset type="texture" name="button_hover_element" />
  <asset type="texture" name="button_wings_down" ref="wingsDown" />
  <asset type="texture" name="button_wings_inactive" ref="wingsInactive" />
  <asset type="texture" name="button_wings_open" ref="wingsOpen" />

  <UIEmpty ref="uiItem" alignment="0, 0, 128, 32" />
  <UISimpleMenuItem ref="menuItem" />

  <!-- Background -->
  <item>
    <UIImage
      ref="backgroundLeft"
      texture="button_background"
      color="red"
      alignment="0, 0, 47, 0"
      alignX="left"
      alignY="stretch"
      alignUnitRight="ratio"
      uvs="0, 0, 0.1, 1"
    />
  </item>

  <item>
    <UIImage
      ref="backgroundMiddle"
      texture="button_background"
      color="red"
      alignment="47, 0, 47, 0"
      alignX="stretch"
      alignY="stretch"
      alignUnitLeft="ratio"
      alignUnitRight="ratio"
      uvs="0.1, 0, 0.9, 1"
    />
  </item>

  <item>
    <UIImage
      ref="backgroundRight"
      texture="button_background"
      color="red"
      alignment="47, 0, 0, 0"
      alignX="right"
      alignY="stretch"
      alignUnitLeft="ratio"
      uvs="0.9, 0, 1.0, 1"
    />
  </item>

  <!-- Hover Element -->
  <item>
    <UIImage
      ref="hoverDeocration"
      texture="button_hover_element"
      color="transparent"
      alignment="0, -320, 400, 175"
      alignX="UI_COMPONENT_ALIGN_MIDDLE"
      alignY="UI_COMPONENT_ALIGN_END"
    />
  </item>

  <!-- Left Wing -->
  <item>
    <UIImage
      texture="button_wings_down"
      ref="wingsLeft"
      alignment="-40, -27, 67.075, 75.65"
      alignX="UI_COMPONENT_ALIGN_START"
      alignY="UI_COMPONENT_ALIGN_START"
      uvs="0, 0, 0.5, 1"
    />
  </item>

  <!-- Right Wing -->
  <item>
    <UIImage
      texture="button_wings_down"
      ref="wingsRight"
      alignment="67, -27, -40, 75"
      alignX="UI_COMPONENT_ALIGN_END"
      alignY="UI_COMPONENT_ALIGN_START"
      uvs="0.5, 0, 1, 1"
    />
  </item>

  <!-- Label -->
  <item>
    <UISimpleLabel
      ref="label"
      font="font_main"
      size="16"
      alignment="0, 6, 0, 6"
      alignX="stretch"
      alignY="stretch"
      textAlign="center"
    >
      Hello Button.
    </UISimpleLabel>
  </item>

  <code type="init">
    useEvent([&amp;]{
      hoverDeocration->color = COLOR_WHITE;
      backgroundLeft->color = backgroundMiddle->color = backgroundRight->color = COLOR_BLUE;
      wingsLeft->texture = &amp;wingsOpen->texture;
      wingsRight->texture = &amp;wingsOpen->texture;
    }, menuItem->eventHoveredOn);

    useEvent([&amp;]{
      hoverDeocration->color = COLOR_TRANSPARENT;
      backgroundLeft->color = backgroundMiddle->color = backgroundRight->color = COLOR_RED;
      wingsLeft->texture = &amp;wingsDown->texture;
      wingsRight->texture = &amp;wingsDown->texture;
    }, menuItem->eventHoveredOff);
  </code>
</prefab>