@memori.ai/memori-react/src/components/ui/Button.css

[](https://www.npmjs.com/package/@memori.ai/memori-react)  ![TypeScript Support](https

.memori-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 15px;
    border: 1px solid var(--memori-button-border-color, #d9d9d9);
    border-radius: var(--memori-button-radius, 5px);
    background: var(--memori-button-bg, #fff);
    box-shadow: var(--memori-button-box-shadow);
    color: var(--memori-button-text, #333);
    font-family: var(--memori-font-family);
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.memori-button--active {
    background: var(--memori-primary);
    color: var(--memori-primary-text);
}

.memori-button:hover {
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 4px 8px rgba(0, 0, 0, 0.04);
    color: #333;
    cursor: pointer;
}

.memori-button:hover,
.memori-button:focus {
    border-color: var(--memori-primary);
    color: var(--memori-primary);
}

.memori-button:focus {
    outline-color: var(--memori-primary);
}

.memori-button:active {
    box-shadow: inset var(--memori-button-box-shadow);
}

.memori-button--padded {
    padding: var(--memori-button-padding);
}

.memori-button--block {
    display: block;
    width: 100%;
}

.memori-button--primary {
    background: var(--memori-primary);
    color: var(--memori-primary-text);
}

.memori-button--primary:hover,
.memori-button--primary:focus {
    color: var(--memori-primary-text);
}

.memori-button--primary:active {
    transform: scale(0.95);
}

.memori-button--outlined {
    border-color: var(--memori-primary);
    background: none;
    color: var(--memori-primary);
}

.memori-button--outlined:hover,
.memori-button--outlined:focus {
    border-color: var(--memori-primary);
    background-color: var(--memori-primary);
    color: var(--memori-primary-text);
}

.memori-button--outlined:active {
    transform: scale(0.95);
}

.memori-button--ghost {
    border: 1px solid transparent;
    background: none;
    box-shadow: none;
}

.memori-button--ghost:hover,
.memori-button--ghost:focus {
    border-color: transparent;
    background: rgba(0, 0, 0, 0.04);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 4px 8px rgba(0, 0, 0, 0.04);
    color: inherit;
}

.memori-button--ghost:focus {
    border: 1px solid var(--memori-primary);
}

.memori-button--square {
    border-radius: 0;
}

.memori-button--rounded {
    border-radius: var(--memori-button-radius);
}

.memori-button--danger {
    border-color: var(--memori-error-color);
    background: rgba(0, 0, 0, 0.02);
    color: var(--memori-error-color);
}

.memori-button--danger:hover,
.memori-button--danger:focus {
    border-color: var(--memori-error-color);
    background-color: var(--memori-error-color);
    color: #fff;
}

.memori-button--danger.memori-button--ghost {
    border-color: transparent;
    background: none;
    box-shadow: none;
    color: var(--memori-error-color);
}

.memori-button--danger.memori-button--ghost:hover,
.memori-button--danger.memori-button--ghost:focus {
    border-color: var(--memori-error-color);
    background: rgba(0, 0, 0, 0.02);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 4px 8px rgba(0, 0, 0, 0.04);
    color: var(--memori-error-color);
}

.memori-button--circle {
    padding: 0.75em;
    border-radius: 50%;
    aspect-ratio: 1/1;
}

.memori-button--icon {
    display: inline-flex;
    color: currentColor;
}

.memori-button--icon svg {
    width: 1.25em;
    height: 1.25em;
    fill: currentColor;
    font-size: 1em;
    line-height: 1;
}

.memori-button--icon svg[fill='none'] {
    fill: none;
}

.memori-button--with-icon .memori-button--icon {
    margin-right: 0.5em;
}

.memori-button[disabled] {
    background: var(--memori-button-disabled-bg, #ccc);
    color: var(--memori-button-disabled-color, #000);
    cursor: not-allowed;
    opacity: 0.5;
}