diff --git a/components/button-group/__tests__/__snapshots__/index.test.tsx.snap b/components/button-group/__tests__/__snapshots__/index.test.tsx.snap
index ae8ca85..1f1b04c 100644
--- a/components/button-group/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/button-group/__tests__/__snapshots__/index.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`ButtonGroup buttons should be displayed vertically 1`] = `
           text-align: center;
           white-space: nowrap;
           transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
-            border 200ms ease 0ms;
+            border 200ms ease 0ms, color 200ms ease 0ms;
           position: relative;
           overflow: hidden;
           color: #666;
@@ -80,7 +80,7 @@ exports[`ButtonGroup buttons should be displayed vertically 1`] = `
           text-align: center;
           white-space: nowrap;
           transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
-            border 200ms ease 0ms;
+            border 200ms ease 0ms, color 200ms ease 0ms;
           position: relative;
           overflow: hidden;
           color: #666;
@@ -188,7 +188,7 @@ exports[`ButtonGroup props should be passed to each button 1`] = `
           text-align: center;
           white-space: nowrap;
           transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
-            border 200ms ease 0ms;
+            border 200ms ease 0ms, color 200ms ease 0ms;
           position: relative;
           overflow: hidden;
           color: #fff;
@@ -296,7 +296,7 @@ exports[`ButtonGroup props should be passed to each button 2`] = `
           text-align: center;
           white-space: nowrap;
           transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
-            border 200ms ease 0ms;
+            border 200ms ease 0ms, color 200ms ease 0ms;
           position: relative;
           overflow: hidden;
           color: #fff;
@@ -404,7 +404,7 @@ exports[`ButtonGroup should render correctly 1`] = `
           text-align: center;
           white-space: nowrap;
           transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
-            border 200ms ease 0ms;
+            border 200ms ease 0ms, color 200ms ease 0ms;
           position: relative;
           overflow: hidden;
           color: #666;
diff --git a/components/button-group/button-group.tsx b/components/button-group/button-group.tsx
index 867ebda..1cd2eb5 100644
--- a/components/button-group/button-group.tsx
+++ b/components/button-group/button-group.tsx
@@ -3,7 +3,7 @@ import useTheme from '../styles/use-theme'
 import withDefaults from '../utils/with-defaults'
 import { NormalSizes, ButtonTypes } from '../utils/prop-types'
 import { ButtonGroupContext, ButtonGroupConfig } from './button-group-context'
-import { getButtonColors } from '../button/styles'
+import { ZeitUIThemesPalette } from 'components/styles/themes'
 
 interface Props {
   disabled?: boolean
@@ -26,16 +26,23 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type ButtonGroupProps = Props & typeof defaultProps & NativeAttrs
 
-const ButtonGroup: React.FC<React.PropsWithChildren<ButtonGroupProps>> = ({
-  disabled,
-  size,
-  type,
-  ghost,
-  vertical,
-  children,
-  className,
-}) => {
+const getGroupBorderColors = (palette: ZeitUIThemesPalette, props: ButtonGroupProps): string => {
+  const { ghost, type } = props
+  if (!ghost && type !== 'default') return palette.background
+  const colors: { [key in ButtonTypes]?: string } = {
+    default: palette.border,
+    success: palette.success,
+    secondary: palette.secondary,
+    error: palette.error,
+    warning: palette.warning,
+  }
+  const withoutLightType = type.replace('-light', '') as ButtonTypes
+  return colors[withoutLightType] || (colors.default as string)
+}
+
+const ButtonGroup: React.FC<React.PropsWithChildren<ButtonGroupProps>> = groupProps => {
   const theme = useTheme()
+  const { disabled, size, type, ghost, vertical, children, className, ...props } = groupProps
   const initialValue = useMemo<ButtonGroupConfig>(
     () => ({
       disabled,
@@ -47,19 +54,13 @@ const ButtonGroup: React.FC<React.PropsWithChildren<ButtonGroupProps>> = ({
     [disabled, size, type],
   )
 
-  const { border } = useMemo(() => {
-    const results = getButtonColors(theme, type, disabled, ghost)
-    if (!ghost && type !== 'default')
-      return {
-        ...results,
-        border: theme.palette.background,
-      }
-    return results
+  const border = useMemo(() => {
+    return getGroupBorderColors(theme.palette, groupProps)
   }, [theme, type, disabled, ghost])
 
   return (
     <ButtonGroupContext.Provider value={initialValue}>
-      <div className={`btn-group ${vertical ? 'vertical' : 'horizontal'} ${className}`}>
+      <div className={`btn-group ${vertical ? 'vertical' : 'horizontal'} ${className}`} {...props}>
         {children}
         <style jsx>{`
           .btn-group {
diff --git a/components/toast/__tests__/__snapshots__/index.test.tsx.snap b/components/toast/__tests__/__snapshots__/index.test.tsx.snap
index 5f217c9..bbdb583 100644
--- a/components/toast/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/toast/__tests__/__snapshots__/index.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`UseToast should render different actions 1`] = `
           text-align: center;
           white-space: nowrap;
           transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
-            border 200ms ease 0ms;
+            border 200ms ease 0ms, color 200ms ease 0ms;
           position: relative;
           overflow: hidden;
           color: #fff;
@@ -80,7 +80,7 @@ exports[`UseToast should render different actions 1`] = `
           text-align: center;
           white-space: nowrap;
           transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
-            border 200ms ease 0ms;
+            border 200ms ease 0ms, color 200ms ease 0ms;
           position: relative;
           overflow: hidden;
           color: #666;