# 按钮 按钮组件是自定义页面设计中一个非常重要的元素，它允许用户通过单击触发一个动作。 在左侧组件区域，选择"按钮"组件，并拖拽至设计区域，如[图1]所示。 图1拖拽按钮组件到设计区并设置属性 ![](https://support.huaweicloud.com/usermanual-astroflow/zh-cn_image_0000001999367349.png) #### 基础配置 - 文本：输出按钮显示的内容。输入内容不得超过32个字符。 - 文本大小：设置按钮文本大小，默认为14px，取值范围为\[8，100\]。 - 文本颜色：默认为黑色，可自定义修改。 - 按钮形态：设置按钮形态，支持"实心"、"轮廓线"、"文本"和"图标按钮"四种形态。 - 当"按钮形态"选择"实心"、"轮廓线"或"文本"时，需设置按钮主题。flow提供了"主要按钮"、"次要按钮"和"警示按钮"三种常见的按钮类型，每种按钮都有其特定的用途和视觉特征，您可按需选择。 - 主要按钮：表示界面中最主要或最重要的操作，如提交表单、确认购买等。通常具有醒目的颜色，以便在页面上突出显示。 - 次要按钮：用于表示次要或辅助的操作，如取消操作、返回上一步等。 - 警示按钮：用于表示操作可能带来风险。通常采用红色或其他警示颜色，以引起警觉。 - 当"按钮形态"选择"图标按钮"时，需设置以下参数。 - 图标大小：设置图标显示大小，可选择小、中和大三种规格。 - 图标样式：设置图标显示的样式，纯色或图片。 - 背景：当"图标样式"选择"纯色"时配置，选择图标的背景颜色。 - 上传自定义图片：当"图标样式"选择"图片"时配置，上传图标背景图片。 上传的图片支持jpg、jpeg、png、gif格式，图片大小单张在5MB以内。 - 文本位置：设置按钮文本的位置，可设置在图标右侧或图标下方。 - 按钮操作：设置单击触发的动作，默认为"打开已发布表单"，可根据需求选择"打开已发布表单"、"打开已发布数据管理页"、"打开已发布自定义页面"或"打开外部链接"。 - 打开方式：根据应用场景选择打开方式，支持"当前页面打开"、"新页面打开"和"弹框打开"三种方式。 - 选择页面：下拉框中选择已发布表单，当"按钮操作"选择"打开已发布表单"、"打开已发布数据管理页"或"打开已发布自定义页面"时可配置。 注意：请选择应用内已发布页面作为打开页面，页面停止发布将影响按钮事件 - 当"按钮操作"选择""打开外部链接"时，输入以http(s)开头链接地址。 #### 样式配置 - 内间距：设置容器内组件与容器四边的间距，可分别配置上、下、左、右或四周。默认值为0px，范围为0\~100px。 ![](https://support.huaweicloud.com/usermanual-astroflow/zh-cn_image_0000002036507945.png) - 外间距：设置容器外与其他容器四边的间距，可分别配置上、下、左、右或四周。默认值为0px，范围为0\~100px。 - 边框： - 位置：设置边框的位置，支持配置上、下、左、右和四周。 - 宽度：设置边框的宽度。默认值为0px，范围为0\~50px。 - 样式：设置边框样式，根据需求选择"无"、"圆点"、"虚线"和"实线"。 - 颜色：设置边框显示的颜色。 ![](https://support.huaweicloud.com/usermanual-astroflow/zh-cn_image_0000002014341257.png) - 圆角：给元素添加圆角效果，设置圆角的大小和位置。 默认值为0px，范围为0\~500px。 ![](https://support.huaweicloud.com/usermanual-astroflow/zh-cn_image_0000002014500777.png) - 背景：设置组件样式的背景颜色。 - 阴影： - X：X偏移，阴影相对于其源元素在水平方向（X轴）的偏移距离，取值范围\[-100, 100\]。 - Y：Y偏移，阴影在垂直方向（Y轴）的偏移距离，取值范围\[-100, 100\]。 - 模糊：阴影的模糊程度。值为0时表示阴影边缘锐利，没有模糊。值越大，阴影的边缘就越模糊，从而产生更柔和的阴影效果。取值范围\[0, 100\]。 - 扩散：扩散半径，它允许阴影在原始尺寸基础上向外扩散。正值会使阴影扩大，负值则会减小阴影的尺寸。取值范围\[-100, 100\]。 - 颜色：设置阴影的颜色。 ![](https://support.huaweicloud.com/usermanual-astroflow/zh-cn_image_0000001977741172.png)