javascript——在一个角度组件中使用大量输入是否不好？

在一个大型项目中，我们决定创建一个按钮组件。我们为我们需要的大部分东西添加了输入，最后总计为20个输入。

  @Input() body: string;
  @Input() chevron: "right" | "left" | "none" = "none";
  @Input() chevronDown: "right" | "left" | "none" = "none";
  @Input() padding: "small" | "normal" = "normal";
  @Input() shade: "dark" | "light" = "dark";
  @Input() active: boolean = false;
  @Input() color: "primary" | "transparent" | "danger" | "warning" | "secondary" | "success" = "primary";
  @Input() buttonType: "button" | "menu" | "reset" | "submit" = "button";
  @Input() disabled: boolean = false;
  @Input() icon: "plus" | "three-dots" | "x" | "chevron-down" | "chevron-up" | "pen" | "grid" | "funnel";
  @Input() helper: string;
  @Input() fontSize: "x-small" | "small" | "normal" = "normal";
  @Input() textAlign: "left" | "center" | "right" = "left";
  @Input() spinner: "left" | "right" | "none" = "none";
  @Input() disableWhenSpin: boolean = true;
  @Input() fontWeight: number = 400;
  @Input() width: "full" | "normal" = "normal";
  @Input() hiddenAfter: "md" | "none" = "none";
  @Input() hiddenBefore: "md" | "none" = "none";
  @Input() checkbox = false;
  @Input() checked = false;

我们在模板中添加了图标，并有条件地用输入呈现它们。但大多数情况下，我们不会有条件地提供输入：

  <app-button body="Cancel"

                    padding="small"
                    color="transparent"

                    (onClick)="cancelEmitter.emit()"></app-button> 

所以，如果我们不有条件地提供输入（比如[color]的color insead），那么向组件添加这么多输入和html是不好的。还有，根据输入删除不必要的html和js逻辑，如果是这样的话，这也不应该是一个问题吗？