dify/web/app/components/base/button/index.css

@utility btn {
  @apply inline-flex justify-center items-center cursor-pointer whitespace-nowrap
    outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid;

  &:is(:disabled, [data-disabled]) {
    @apply cursor-not-allowed;
  }
}

@utility btn-small {
  @apply px-2 h-6 rounded-md text-xs font-medium;
}

@utility btn-medium {
  @apply px-3.5 h-8 rounded-lg text-[13px] leading-4 font-medium;
}

@utility btn-large {
  @apply px-4 h-9 rounded-[10px] text-sm font-semibold;
}

@utility btn-primary {
  @apply shadow
    bg-components-button-primary-bg
    border-components-button-primary-border
    hover:bg-components-button-primary-bg-hover
    hover:border-components-button-primary-border-hover
    text-components-button-primary-text;

  &.btn-destructive {
    @apply bg-components-button-destructive-primary-bg
    border-components-button-destructive-primary-border
    hover:bg-components-button-destructive-primary-bg-hover
    hover:border-components-button-destructive-primary-border-hover
    text-components-button-destructive-primary-text;
  }

  &:is(:disabled, [data-disabled]) {
    @apply shadow-none
    bg-components-button-primary-bg-disabled
    border-components-button-primary-border-disabled
    text-components-button-primary-text-disabled;
  }

  &.btn-destructive:is(:disabled, [data-disabled]) {
    @apply shadow-none
    bg-components-button-destructive-primary-bg-disabled
    border-components-button-destructive-primary-border-disabled
    text-components-button-destructive-primary-text-disabled;
  }
}

@utility btn-destructive {
  &.btn-primary {
    @apply bg-components-button-destructive-primary-bg
    border-components-button-destructive-primary-border
    hover:bg-components-button-destructive-primary-bg-hover
    hover:border-components-button-destructive-primary-border-hover
    text-components-button-destructive-primary-text;
  }

  &.btn-primary:is(:disabled, [data-disabled]) {
    @apply shadow-none
    bg-components-button-destructive-primary-bg-disabled
    border-components-button-destructive-primary-border-disabled
    text-components-button-destructive-primary-text-disabled;
  }

  &.btn-secondary {
    @apply bg-components-button-destructive-secondary-bg
    border-components-button-destructive-secondary-border
    hover:bg-components-button-destructive-secondary-bg-hover
    hover:border-components-button-destructive-secondary-border-hover
    text-components-button-destructive-secondary-text;
  }

  &.btn-secondary:is(:disabled, [data-disabled]) {
    @apply bg-components-button-destructive-secondary-bg-disabled
    border-components-button-destructive-secondary-border-disabled
    text-components-button-destructive-secondary-text-disabled;
  }

  &.btn-tertiary {
    @apply bg-components-button-destructive-tertiary-bg
    hover:bg-components-button-destructive-tertiary-bg-hover
    text-components-button-destructive-tertiary-text;
  }

  &.btn-tertiary:is(:disabled, [data-disabled]) {
    @apply bg-components-button-destructive-tertiary-bg-disabled
    text-components-button-destructive-tertiary-text-disabled;
  }

  &.btn-ghost {
    @apply hover:bg-components-button-destructive-ghost-bg-hover
    text-components-button-destructive-ghost-text;
  }

  &.btn-ghost:is(:disabled, [data-disabled]) {
    @apply text-components-button-destructive-ghost-text-disabled;
  }
}

@utility btn-secondary {
  @apply border-[0.5px]
    shadow-xs
    backdrop-blur-[5px]
    bg-components-button-secondary-bg
    border-components-button-secondary-border
    hover:bg-components-button-secondary-bg-hover
    hover:border-components-button-secondary-border-hover
    text-components-button-secondary-text;

  &:is(:disabled, [data-disabled]) {
    @apply backdrop-blur-xs
    bg-components-button-secondary-bg-disabled
    border-components-button-secondary-border-disabled
    text-components-button-secondary-text-disabled;
  }

  &.btn-destructive {
    @apply bg-components-button-destructive-secondary-bg
    border-components-button-destructive-secondary-border
    hover:bg-components-button-destructive-secondary-bg-hover
    hover:border-components-button-destructive-secondary-border-hover
    text-components-button-destructive-secondary-text;
  }

  &.btn-destructive:is(:disabled, [data-disabled]) {
    @apply bg-components-button-destructive-secondary-bg-disabled
    border-components-button-destructive-secondary-border-disabled
    text-components-button-destructive-secondary-text-disabled;
  }
}

@utility btn-secondary-accent {
  @apply border-[0.5px]
    shadow-xs
    bg-components-button-secondary-bg
    border-components-button-secondary-border
    hover:bg-components-button-secondary-bg-hover
    hover:border-components-button-secondary-border-hover
    text-components-button-secondary-accent-text;

  &:is(:disabled, [data-disabled]) {
    @apply bg-components-button-secondary-bg-disabled
    border-components-button-secondary-border-disabled
    text-components-button-secondary-accent-text-disabled;
  }
}

@utility btn-warning {
  @apply bg-components-button-destructive-primary-bg
    border-components-button-destructive-primary-border
    hover:bg-components-button-destructive-primary-bg-hover
    hover:border-components-button-destructive-primary-border-hover
    text-components-button-destructive-primary-text;

  &:is(:disabled, [data-disabled]) {
    @apply bg-components-button-destructive-primary-bg-disabled
    border-components-button-destructive-primary-border-disabled
    text-components-button-destructive-primary-text-disabled;
  }
}

@utility btn-tertiary {
  @apply bg-components-button-tertiary-bg
    hover:bg-components-button-tertiary-bg-hover
    text-components-button-tertiary-text;

  &:is(:disabled, [data-disabled]) {
    @apply bg-components-button-tertiary-bg-disabled
    text-components-button-tertiary-text-disabled;
  }

  &.btn-destructive {
    @apply bg-components-button-destructive-tertiary-bg
    hover:bg-components-button-destructive-tertiary-bg-hover
    text-components-button-destructive-tertiary-text;
  }

  &.btn-destructive:is(:disabled, [data-disabled]) {
    @apply bg-components-button-destructive-tertiary-bg-disabled
    text-components-button-destructive-tertiary-text-disabled;
  }
}

@utility btn-ghost {
  @apply hover:bg-components-button-ghost-bg-hover
    text-components-button-ghost-text;

  &:is(:disabled, [data-disabled]) {
    @apply text-components-button-ghost-text-disabled;
  }

  &.btn-destructive {
    @apply hover:bg-components-button-destructive-ghost-bg-hover
    text-components-button-destructive-ghost-text;
  }

  &.btn-destructive:is(:disabled, [data-disabled]) {
    @apply text-components-button-destructive-ghost-text-disabled;
  }
}

@utility btn-ghost-accent {
  @apply hover:bg-state-accent-hover
    text-components-button-secondary-accent-text;

  &:is(:disabled, [data-disabled]) {
    @apply text-components-button-secondary-accent-text-disabled;
  }
}