diff --git a/preview/assets/scss/main.scss b/preview/assets/scss/main.scss
index 5106276..45f1287 100644
--- a/preview/assets/scss/main.scss
+++ b/preview/assets/scss/main.scss
@@ -143,3 +143,34 @@
 .form-group--stacked\:md {
   @include form-group-stacked('md');
 }
+
+.ring-wrapper {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.ring-one,
+.ring-two {
+  --size: 3rem;
+  @include clear-btn;
+  block-size: var(--size);
+  inline-size: var(--size);
+}
+
+.ring-one {
+  background-color: pink;
+
+  &:focus-visible {
+    @include short-ring('input');
+  }
+}
+
+.ring-two {
+  background-color: rebeccapurple;
+
+  &:focus-visible {
+    @include short-ring('button', 'secondary');
+  }
+}
diff --git a/preview/pug/page/mixin.pug b/preview/pug/page/mixin.pug
index 4d39f0d..a47412b 100644
--- a/preview/pug/page/mixin.pug
+++ b/preview/pug/page/mixin.pug
@@ -5,6 +5,10 @@ block variables
   -var page = 'mixin';
 
 block content
+  h2(class='section-title') short-ring
+  div(class='ring-wrapper')
+    button(class='ring-one')
+    button(class='ring-two')
   h2(class='section-title') scrollbar
   div(class='scrollbar')
     p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut diam lorem. Morbi porttitor venenatis dui, hendrerit volutpat dolor suscipit sed. Maecenas leo neque, pulvinar tempus ultricies a, eleifend eget sem. Fusce in egestas ex, nec ultricies eros. Pellentesque mollis egestas nulla, quis gravida urna facilisis sit amet. Nulla facilisi. Nam quis libero sem. Nulla eget justo eros. Nam rutrum a nunc et luctus. Nunc lobortis arcu metus, eget vehicula lacus malesuada quis. Cras quis elementum lacus. Quisque in ante dui. Curabitur vel rhoncus nisl.
diff --git a/scss/mixin/_utilities.scss b/scss/mixin/_utilities.scss
index 686c715..6148383 100644
--- a/scss/mixin/_utilities.scss
+++ b/scss/mixin/_utilities.scss
@@ -1,6 +1,8 @@
 @use 'sass:map';
 @use '../function' as *;
 @use '../config' as *;
+@use 'form' as *;
+
 
 /// Hide something from the screen but keep it visible for assistive technology.
 /// @return {mixin} - The visually hidden mixin.
@@ -118,7 +120,7 @@
   }
 }
 
-/// Break long string
+/// Break long string.
 /// @author Chris Coyier - https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 /// @return {mixin} - The word-wrap mixin.
 @mixin word-wrap {
@@ -128,3 +130,43 @@
   word-break: break-word;
   word-wrap: break-word;
 }
+
+/// Generate a focus ring.
+/// @param {string} $type - The type of the focus ring.
+/// @param {string} $btn-type - The type - hence color - of the button.
+/// @return {mixin} - The focus ring mixin.
+@mixin short-ring(
+  $type: 'input',
+  $btn-type: 'primary'
+) {
+  @if $type == 'input' {
+    @include focus-ring(
+      $type: config('focus-ring-type', $form-control, false),
+      $border-color: color('border-focus', 'form'),
+      $ring-color: color('ring-focus', 'form'),
+      $box-shadow-type: config('focus-ring-box-shadow-type', $form-control, false),
+      $ring-size: config('focus-ring-size', $form-control, false),
+      $ring-offset: config('focus-ring-offset', $form-control, false)
+    );
+  }
+
+  @if $type == 'button' {
+    $ring-color: null;
+
+    @if map.has-key($colors, 'btn', $btn-type + '-focus-ring') {
+      $ring-color: color($btn-type + '-focus-ring', 'btn');
+    } @else {
+      $ring-color: color($btn-type + '-background', 'btn');
+    }
+
+    &:focus {
+      @include focus-ring(
+        $type: config('focus-ring-type', $btn, false),
+        $ring-color: $ring-color,
+        $box-shadow-type: config('focus-ring-box-shadow-type', $btn, false),
+        $ring-size: config('focus-ring-size', $btn, false),
+        $ring-offset: config('focus-ring-offset', $btn, false)
+      );
+    }
+  }
+}