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(`

Button types

Use a primary button to draw the users attention to important actions. Use default buttons for less important actions.

A danger button should be used only for destructive actions.

<ds-button>Default</ds-button>
<ds-button primary>Primary</ds-button>
<ds-button secondary>Secondary</ds-button>
<ds-button danger>Danger</ds-button>

Ghost buttons

Use a ghost button for secondary actions.

<ds-button ghost>Default</ds-button>
<ds-button ghost primary>Primary</ds-button>
<ds-button ghost secondary>Secondary</ds-button>
<ds-button ghost danger>Danger</ds-button>

Button sizes

Use different sizes to create hierarchy.

<ds-button size="small">Small</ds-button>
<ds-button>Base</ds-button>
<ds-button size="large">Large</ds-button>
<ds-button size="x-large">very Large</ds-button>

Button full width

<ds-button fullwidth primary>Full Width</ds-button>

Button states

A button can take different states.

<ds-button>Default state</ds-button>
<ds-button disabled>Disabled state</ds-button>
<ds-button hover>Hover state</ds-button>
<ds-button loading>Loading state</ds-button>

Icon buttons

Add an icon to a button to help the user identify the button's action.

<ds-button icon="arrow-left" primary>Click me</ds-button>
<ds-button icon="arrow-right" right>Click me</ds-button>
<ds-button icon="plus" primary></ds-button>
<ds-button icon="plus" ghost></ds-button>

Button as links

Provide a path to the button. You can pass a url string or a Vue router path object.

<ds-button path="/navigation">Click me</ds-button>
<ds-button :path="{ name: 'Navigation' }">Click me</ds-button>

`,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":"

Button types

\\n

Use a primary button to draw the users attention to important actions. Use default buttons for less important actions.

\\n

A danger button should be used only for destructive actions.

\\n

<ds-button>Default</ds-button>\\n<ds-button primary>Primary</ds-button>\\n<ds-button secondary>Secondary</ds-button>\\n<ds-button danger>Danger</ds-button>

\\n

"}');export{d as comp,r as data};