ExBadge

<VBox class="sapUiSmallMargin" alignItems="Stretch">

                <ux7:ExPanel variant="outlined" size="md" icon="info"
                    title="01 · State variants"
                    subtitle="error · primary · success · warning · info · default"
                    expanded="true" expandable="true">
                    <FlexBox wrap="Wrap" justifyContent="SpaceAround" alignItems="Center" class="sapUiSmallMarginBottom" gap="2rem">
                        <ux7:ExBadge value="5" state="error"   standalone="true" />
                        <ux7:ExBadge value="5" state="primary" standalone="true" />
                        <ux7:ExBadge value="5" state="success" standalone="true" />
                        <ux7:ExBadge value="5" state="warning" standalone="true" />
                        <ux7:ExBadge value="5" state="info"    standalone="true" />
                        <ux7:ExBadge value="5" state="default" standalone="true" />
                    </FlexBox>
                </ux7:ExPanel>

                <ux7:ExPanel variant="outlined" size="md" icon="pkg"
                    title="02 · Finish"
                    subtitle="solid · soft · outline · gradient"
                    expanded="true" expandable="true">
                    <FlexBox wrap="Wrap" justifyContent="SpaceAround" alignItems="Center" class="sapUiSmallMarginBottom" gap="2rem">
                        <ux7:ExBadge value="8" finish="solid"    state="primary" standalone="true" />
                        <ux7:ExBadge value="8" finish="soft"     state="primary" standalone="true" />
                        <ux7:ExBadge value="8" finish="outline"  state="primary" standalone="true" />
                        <ux7:ExBadge value="8" finish="gradient" state="primary" standalone="true" />
                        <ux7:ExBadge value="8" finish="solid"    state="error"   standalone="true" />
                        <ux7:ExBadge value="8" finish="soft"     state="error"   standalone="true" />
                        <ux7:ExBadge value="8" finish="outline"  state="error"   standalone="true" />
                        <ux7:ExBadge value="8" finish="gradient" state="error"   standalone="true" />
                    </FlexBox>
                </ux7:ExPanel>

                <ux7:ExPanel variant="outlined" size="md" icon="settings"
                    title="03 · Size"
                    subtitle="sm · md · lg"
                    expanded="true" expandable="true">
                    <FlexBox wrap="Wrap" justifyContent="SpaceAround" alignItems="Center" class="sapUiSmallMarginBottom" gap="2rem">
                        <ux7:ExBadge value="3" size="sm" standalone="true" />
                        <ux7:ExBadge value="3" size="md" standalone="true" />
                        <ux7:ExBadge value="3" size="lg" standalone="true" />
                    </FlexBox>
                </ux7:ExPanel>

                <ux7:ExPanel variant="outlined" size="md" icon="money"
                    title="04 · Max overflow"
                    subtitle="default 99 — 100+ gösterimi"
                    expanded="true" expandable="true">
                    <FlexBox wrap="Wrap" justifyContent="SpaceAround" alignItems="Center" class="sapUiSmallMarginBottom" gap="2rem">
                        <ux7:ExBadge value="50"  max="99" standalone="true" />
                        <ux7:ExBadge value="99"  max="99" standalone="true" />
                        <ux7:ExBadge value="100" max="99" standalone="true" />
                        <ux7:ExBadge value="999" max="99" standalone="true" />
                        <ux7:ExBadge value="5"   max="4"  standalone="true" state="warning" />
                    </FlexBox>
                </ux7:ExPanel>

                <ux7:ExPanel variant="outlined" size="md" icon="user"
                    title="05 · Dot mode"
                    subtitle="Sayısız nokta gösterimi"
                    expanded="true" expandable="true">
                    <FlexBox wrap="Wrap" justifyContent="SpaceAround" alignItems="Center" class="sapUiSmallMarginBottom" gap="2rem">
                        <ux7:ExBadge dot="true" state="error"   standalone="true" />
                        <ux7:ExBadge dot="true" state="success" standalone="true" />
                        <ux7:ExBadge dot="true" state="warning" standalone="true" />
                        <ux7:ExBadge dot="true" state="info"    standalone="true" />
                        <ux7:ExBadge dot="true" state="primary" size="lg" standalone="true" />
                    </FlexBox>
                </ux7:ExPanel>

                <ux7:ExPanel variant="tonal" size="md" icon="bell"
                    title="06 · Live dot"
                    subtitle="Canlı halka animasyonu"
                    expanded="true" expandable="true">
                    <FlexBox wrap="Wrap" justifyContent="SpaceAround" alignItems="Center" class="sapUiSmallMarginBottom" gap="2rem">
                        <ux7:ExBadge dot="true" live="true" state="error"   standalone="true" />
                        <ux7:ExBadge dot="true" live="true" state="success" standalone="true" />
                        <ux7:ExBadge dot="true" live="true" state="warning" standalone="true" />
                        <ux7:ExBadge dot="true" live="true" state="info"    standalone="true" />
                    </FlexBox>
                </ux7:ExPanel>

                <ux7:ExPanel variant="outlined" size="md" icon="zap"
                    title="07 · Pill text labels"
                    subtitle="NEW · BETA · PRO · HOT · FREE"
                    expanded="true" expandable="true">
                    <FlexBox wrap="Wrap" justifyContent="SpaceAround" alignItems="Center" class="sapUiSmallMarginBottom" gap="1rem">
                        <ux7:ExBadge value="NEW"  pill="true" state="primary" standalone="true" />
                        <ux7:ExBadge value="BETA" pill="true" state="info"    standalone="true" />
                        <ux7:ExBadge value="PRO"  pill="true" state="warning" standalone="true" />
                        <ux7:ExBadge value="HOT"  pill="true" state="error"   standalone="true" />
                        <ux7:ExBadge value="FREE" pill="true" state="success" standalone="true" />
                        <ux7:ExBadge value="BETA" pill="true" finish="soft"     state="info"    standalone="true" />
                        <ux7:ExBadge value="PRO"  pill="true" finish="outline"  state="warning" standalone="true" />
                        <ux7:ExBadge value="NEW"  pill="true" finish="gradient" state="primary" standalone="true" />
                    </FlexBox>
                </ux7:ExPanel>

                <ux7:ExPanel variant="outlined" size="md" icon="loc"
                    title="08 · Position — anchor üzerinde"
                    subtitle="top-right · top-left · bottom-right · bottom-left"
                    expanded="true" expandable="true">
                    <FlexBox wrap="Wrap" justifyContent="SpaceAround" alignItems="Center" class="sapUiSmallMarginBottom" gap="3rem">
                        <ux7:ExBadge value="3" position="top-right">
                            <ux7:content><ux7:ExButton icon="sap-icon://bell" iconOnly="true" text="Bildirim" /></ux7:content>
                        </ux7:ExBadge>
                        <ux7:ExBadge value="3" position="top-left" state="primary">
                            <ux7:content><ux7:ExButton icon="sap-icon://bell" iconOnly="true" text="Bildirim" /></ux7:content>
                        </ux7:ExBadge>
                        <ux7:ExBadge value="3" position="bottom-right" state="success">
                            <ux7:content><ux7:ExButton icon="sap-icon://bell" iconOnly="true" text="Bildirim" /></ux7:content>
                        </ux7:ExBadge>
                        <ux7:ExBadge value="3" position="bottom-left" state="warning">
                            <ux7:content><ux7:ExButton icon="sap-icon://bell" iconOnly="true" text="Bildirim" /></ux7:content>
                        </ux7:ExBadge>
                        <ux7:ExBadge dot="true" live="true" state="success" position="bottom-right">
                            <ux7:content><ux7:ExButton icon="sap-icon://person-placeholder" iconOnly="true" text="Profil" /></ux7:content>
                        </ux7:ExBadge>
                    </FlexBox>
                </ux7:ExPanel>

                <ux7:ExPanel variant="outlined" size="md" icon="info"
                    title="09 · hideOnZero"
                    subtitle="0 ve boş değer yönetimi"
                    expanded="true" expandable="true">
                    <FlexBox wrap="Wrap" justifyContent="Start" alignItems="Center" class="sapUiSmallMarginBottom" gap="2rem">
                        <ux7:ExBadge id="badgeZero" value="0" hideOnZero="true"  standalone="true" />
                        <ux7:ExBadge               value="0" hideOnZero="false" standalone="true" state="info" />
                        <ux7:ExBadge               value=""  hideOnZero="true"  standalone="true" />
                    </FlexBox>
                </ux7:ExPanel>

                <ux7:ExPanel variant="outlined" size="md" icon="zap"
                    title="10 · Animated vs static"
                    subtitle="Giriş animasyonu açık / kapalı"
                    expanded="true" expandable="true">
                    <FlexBox wrap="Wrap" justifyContent="Start" alignItems="Center" class="sapUiSmallMarginBottom" gap="2rem">
                        <ux7:ExBadge value="7" animated="true"  standalone="true" state="error" />
                        <ux7:ExBadge value="7" animated="false" standalone="true" state="error" />
                    </FlexBox>
                </ux7:ExPanel>

                <ux7:ExPanel variant="tonal-purple" size="md" icon="settings"
                    title="11 · Public API"
                    subtitle="increment · decrement · clear · setValue"
                    expanded="true" expandable="true">
                    <FlexBox wrap="Wrap" justifyContent="Start" alignItems="Center" class="sapUiSmallMarginBottom" gap="1rem">
                        <ux7:ExBadge id="badgeCounter" value="5" standalone="true" state="primary" size="lg" />
                        <ux7:ExButton text="+1"     press="onIncrement" />
                        <ux7:ExButton text="-1"     press="onDecrement" />
                        <ux7:ExButton text="+5"     type="secondary" press="onIncrementFive" />
                        <ux7:ExButton text="Clear"  type="ghost"     press="onClear" />
                        <ux7:ExButton text="Set 99" type="secondary" press="onSet99" />
                        <ux7:ExButton text="Set 0"  type="danger"    press="onSetZero" />
                    </FlexBox>
                </ux7:ExPanel>

                <ux7:ExPanel variant="outlined" size="md" icon="bell"
                    title="12 · Press event"
                    subtitle="Badge tıklama sayacı"
                    expanded="true" expandable="true">
                    <FlexBox wrap="Wrap" justifyContent="Start" alignItems="Center" class="sapUiSmallMarginBottom" gap="2rem">
                        <ux7:ExBadge id="badgePress" value="3" standalone="true"
                                    state="error" press="onBadgePress" />
                        <Text id="lblPressCount" text="0 kez tıklandı" />
                    </FlexBox>
                </ux7:ExPanel>

            </VBox>