@chatui/core/es/components/Button/style.less

The React library for Chatbot UI

.Btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  min-width: 80Px;
  margin: 0;
  padding: var(--btn-padding);
  border: @btn-border-width solid var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  background: var(--btn-bg);
  background-origin: border-box;
  color: var(--btn-color);
  font-weight: var(--btn-font-weight);
  font-size: var(--btn-font-size);
  line-height: var(--btn-line-height);
  font-family: @btn-font-family;
  text-transform: none;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  transition: @btn-transition;
  user-select: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;

  &:not(:disabled) {
    cursor: pointer;
  }
  &[data-loading="true"] {
    cursor: default;
  }
  &:focus:not(:focus-visible) {
    outline: 0;
  }
  &:active {
    --btn-bg: @btn-active-bg;
  }
  &:disabled {
    pointer-events: none;
    opacity: 0.5;
  }
  &--primary:not(.Btn--outline) {
    --btn-border-color: var(--btn-primary-border-color);
    --btn-bg: var(--btn-primary-bg);
    --btn-color: var(--btn-primary-color);

    &:active {
      opacity: 0.8;
    }
  }
  &--outline&--primary {
    --btn-border-color: var(--brand-1);
    --btn-color: var(--brand-1);
  }
  &--sm {
    --btn-padding: var(--btn-padding-sm);
    // border-radius: @btn-border-radius-sm;
    --btn-font-size: var(--btn-font-size-sm);
  }
  &--lg {
    --btn-padding: var(--btn-padding-lg);
    // border-radius: @btn-border-radius-lg;
    --btn-font-size: var(--btn-font-size-lg);

    .Btn-icon {
      vertical-align: -2px;
    }
  }
  &--block {
    display: block;
    width: 100%;
  }
  &-icon {
    display: inline-flex;
    align-self: center;
    flex-shrink: 0;
    margin-inline-end: 0.5rem;
  }
}

.no-btn-flex .Btn:not(.Btn--block) {
  display: inline-block;
}

@media (hover: hover) {
  .Btn {
    &:hover {
      --btn-bg: @btn-hover-bg;
    }
    &--primary:not(.Btn--outline) {
      &:hover {
        --btn-bg: var(--btn-primary-bg);
        opacity: 0.9;
      }
    }
  }
}

.Btn--text {
  --btn-line-height: 1.5;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--link-color);
  font-size: inherit;
  font-weight: inherit;

  &:hover,
  &:active {
    background: transparent;
  }
}