Ocelot-Social/assets/demo.html-CWpO2OIy.js
2026-03-01 11:40:40 +00:00

18 lines
21 KiB
JavaScript

import{_ as i}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as t,a,o as n}from"./app-C6w_Pklu.js";const l={};function h(e,s){return n(),t("div",null,s[0]||(s[0]=[a(`<h2 id="button-types" tabindex="-1"><a class="header-anchor" href="#button-types"><span>Button types</span></a></h2><p>Use a primary button to draw the users attention to important actions. Use default buttons for less important actions.</p><p>A danger button should be used only for destructive actions.</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;Default&lt;/</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> primary</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;Primary&lt;/</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> secondary</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;Secondary&lt;/</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> danger</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;Danger&lt;/</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="ghost-buttons" tabindex="-1"><a class="header-anchor" href="#ghost-buttons"><span>Ghost buttons</span></a></h2><p>Use a ghost button for secondary actions.</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> ghost</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;Default&lt;/</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> ghost</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> primary</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;Primary&lt;/</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> ghost</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> secondary</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;Secondary&lt;/</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> ghost</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> danger</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;Danger&lt;/</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="button-sizes" tabindex="-1"><a class="header-anchor" href="#button-sizes"><span>Button sizes</span></a></h2><p>Use different sizes to create hierarchy.</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&quot;small&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;Small&lt;/</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;Base&lt;/</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&quot;large&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;Large&lt;/</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> size</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&quot;x-large&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;very Large&lt;/</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="button-full-width" tabindex="-1"><a class="header-anchor" href="#button-full-width"><span>Button full width</span></a></h2><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> fullwidth</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> primary</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;Full Width&lt;/</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="button-states" tabindex="-1"><a class="header-anchor" href="#button-states"><span>Button states</span></a></h2><p>A button can take different states.</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;Default state&lt;/</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> disabled</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;Disabled state&lt;/</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> hover</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;Hover state&lt;/</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> loading</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;Loading state&lt;/</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="icon-buttons" tabindex="-1"><a class="header-anchor" href="#icon-buttons"><span>Icon buttons</span></a></h2><p>Add an icon to a button to help the user identify the button&#39;s action.</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> icon</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&quot;arrow-left&quot;</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> primary</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;Click me&lt;/</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> icon</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&quot;arrow-right&quot;</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> right</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;Click me&lt;/</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> icon</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&quot;plus&quot;</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> primary</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;&lt;/</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> icon</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&quot;plus&quot;</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> ghost</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;&lt;/</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="button-as-links" tabindex="-1"><a class="header-anchor" href="#button-as-links"><span>Button as links</span></a></h2><p>Provide a path to the button. You can pass a url string or a Vue router path object.</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> path</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&quot;/navigation&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;Click me&lt;/</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> :path</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&quot;{ name: &#39;Navigation&#39; }&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;Click me&lt;/</span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">ds-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div>`,21)]))}const d=i(l,[["render",h],["__file","demo.html.vue"]]),r=JSON.parse('{"path":"/styleguide/src/system/components/navigation/Button/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Button types","slug":"button-types","link":"#button-types","children":[]},{"level":2,"title":"Ghost buttons","slug":"ghost-buttons","link":"#ghost-buttons","children":[]},{"level":2,"title":"Button sizes","slug":"button-sizes","link":"#button-sizes","children":[]},{"level":2,"title":"Button full width","slug":"button-full-width","link":"#button-full-width","children":[]},{"level":2,"title":"Button states","slug":"button-states","link":"#button-states","children":[]},{"level":2,"title":"Icon buttons","slug":"icon-buttons","link":"#icon-buttons","children":[]},{"level":2,"title":"Button as links","slug":"button-as-links","link":"#button-as-links","children":[]}],"git":{"createdTime":1772365170000,"updatedTime":1772365170000,"contributors":[{"name":"Ulf Gebhardt","email":"ulf.gebhardt@webcraft-media.de","commits":1}]},"readingTime":{"minutes":0.89,"words":268},"filePathRelative":"styleguide/src/system/components/navigation/Button/demo.md","localizedDate":"March 1, 2026","excerpt":"<h2>Button types</h2>\\n<p>Use a primary button to draw the users attention to important actions. Use default buttons for less important actions.</p>\\n<p>A danger button should be used only for destructive actions.</p>\\n<div class=\\"language-html line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"html\\" data-title=\\"html\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">&lt;</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-button</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">&gt;Default&lt;/</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-button</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">&gt;</span></span>\\n<span class=\\"line\\"><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">&lt;</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-button</span><span style=\\"--shiki-light:#986801;--shiki-dark:#D19A66\\"> primary</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">&gt;Primary&lt;/</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-button</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">&gt;</span></span>\\n<span class=\\"line\\"><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">&lt;</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-button</span><span style=\\"--shiki-light:#986801;--shiki-dark:#D19A66\\"> secondary</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">&gt;Secondary&lt;/</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-button</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">&gt;</span></span>\\n<span class=\\"line\\"><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">&lt;</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-button</span><span style=\\"--shiki-light:#986801;--shiki-dark:#D19A66\\"> danger</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">&gt;Danger&lt;/</span><span style=\\"--shiki-light:#E45649;--shiki-dark:#E06C75\\">ds-button</span><span style=\\"--shiki-light:#383A42;--shiki-dark:#ABB2BF\\">&gt;</span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{d as comp,r as data};