diff --git a/services/web/frontend/js/features/ui/components/types/button-props.ts b/services/web/frontend/js/features/ui/components/types/button-props.ts index 79254434ca..e98538e168 100644 --- a/services/web/frontend/js/features/ui/components/types/button-props.ts +++ b/services/web/frontend/js/features/ui/components/types/button-props.ts @@ -32,5 +32,6 @@ export type ButtonProps = { | 'danger' | 'danger-ghost' | 'premium' + | 'premium-secondary' | 'link' } diff --git a/services/web/frontend/stories/ui/button.stories.tsx b/services/web/frontend/stories/ui/button.stories.tsx index 60e07c950b..27f113dcdb 100644 --- a/services/web/frontend/stories/ui/button.stories.tsx +++ b/services/web/frontend/stories/ui/button.stories.tsx @@ -41,6 +41,7 @@ const meta: Meta = { 'danger', 'danger-ghost', 'premium', + 'premium-secondary', ], }, }, diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/button.scss b/services/web/frontend/stylesheets/bootstrap-5/components/button.scss index 286a46b8f8..536799f09c 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/button.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/components/button.scss @@ -91,6 +91,17 @@ background: var(--blue-70); } } + + &.btn-premium-secondary { + @include ol-button-variant( + $color: var(--blue-60), + $background: var(--bg-light-primary), + $border: var(--blue-60), + $hover-background: var(--bg-info-03), + $hover-border: var(--blue-60), + $borderless: false + ); + } } // Link buttons diff --git a/services/web/frontend/stylesheets/components/buttons.less b/services/web/frontend/stylesheets/components/buttons.less index 448ae4afa9..4ce8459bc2 100755 --- a/services/web/frontend/stylesheets/components/buttons.less +++ b/services/web/frontend/stylesheets/components/buttons.less @@ -132,6 +132,11 @@ } } +.btn-premium-secondary { + .btn-bordered(); + .button-variant(@blue-60, @white, @blue-60); +} + .reset-btns { // reset all buttons back to their original colors .btn-danger {