Css 关于仪表板设计选项的困惑

我为我们的机器提供了7种不同的选项，我将它们放在页面顶部，让用户可以选择了解他们的机器中发生了什么，下面是我创建的

显示了多少台机器处于哪种状态，但有两个问题（据我们所知）它们占用了大量空间，我不知道显示这些的最佳方式是什么？我知道没有独特的方法，但至少我想了解一些情况，我想放一个带有徽章的简单按钮，如下所示：

            <button type="button" class="btn btn-outline-danger">
             All <span class="badge badge-light">236</span>
        </button>
        <button type="button" class="btn btn-outline-success">
             Run <span class="badge badge-light">4</span>
        </button>
        <button type="button" class="btn btn-outline-danger">
             STOP <span class="badge badge-light">4</span>
        </button>
        <button type="button" class="btn btn-outline-danger">
             Data_Incomplete <span class="badge badge-light">33</span>
        </button>

全部236
运行4
停止4
数据不完整33

---

但问题是，取决于文本的长度，大小会有所不同，任何想法都会受到欢迎

如果大小因文本内容而变得混乱，那么您可以给文本容器指定一个固定的宽度，然后添加省略号。当用户将鼠标悬停在省略号上时，您可以显示包含整个文本数据的工具提示。@NigelDcruz您的意思是按钮方法很好？