关于 Context 的概念和具体使用，可以阅读 React Context 官方文档。

首先，根据可能需要自定义的属性，构建  对象：

首先，定义按钮的基本属性以及与之对应的颜色映射关系。

随后，分别对 、 以及  组件展开具体的实现，各组件内根据获取到的上下文属性及相关逻辑来处理按钮的显示、点击等行为。具体代码如下：

 组件接收一系列属性，并通过  将这些属性传递给子组件。另外， 组件对弹窗的关闭逻辑进行了整合；当我们关闭模态框时，会依次触发  和  回调函数，确保关闭流程的可控性。具体代码如下：

在上述代码中，通过向  函数传入特定的  参数来创建不同类型的  组件。

接下来，对  组件的渲染逻辑以及创建不同类型  组件的方法进行封装，相关代码如下：

该组件提供了三种预期使用方式。

定义  函数，随后在函数内部调用  组件，并传入配置对象：

效果分别如下：

对  函数中  组件的调用形式进行修改，并且只传入文本内容：

效果分别如下：

修改  函数中  组件的调用形式，同时传入文本内容与配置对象：

效果分别如下：

至此，调用式  组件的实现流程已全部完成。