Buttons

Use button variants, sizes, icons, tooltips, and disabled state based on the current component API.

Examples

These are the supported visual variants.

Default No Border Primary Danger Success
<dr-button variant="btn-default">Default</dr-button>

<dr-button variant="btn-default-no-border">No Border</dr-button>

<dr-button variant="btn-primary">Primary</dr-button>

<dr-button variant="btn-danger">Danger</dr-button>

<dr-button variant="btn-success">Success</dr-button>

Links

Provide href to render the component as a native anchor element while keeping the same button styles.

Default Link No Border Link Primary Link Danger Link Success Link
<dr-button variant="btn-default" href="#default-link">Default Link</dr-button>

<dr-button variant="btn-default-no-border" href="#no-border-link">No Border Link</dr-button>

<dr-button variant="btn-primary" href="#primary-link">Primary Link</dr-button>

<dr-button variant="btn-danger" href="#danger-link">Danger Link</dr-button>

<dr-button variant="btn-success" href="#success-link">Success Link</dr-button>

Sizes

Add btn-sm inside variant to apply the compact size to any button variant.

Default No Border Primary Danger Success
<dr-button variant="btn-default btn-sm">Default</dr-button>

<dr-button variant="btn-default-no-border btn-sm">No Border</dr-button>

<dr-button variant="btn-primary btn-sm">Primary</dr-button>

<dr-button variant="btn-danger btn-sm">Danger</dr-button>

<dr-button variant="btn-success btn-sm">Success</dr-button>

Icons

Buttons support icon-only, text + icon, and icon positioning. Use icon-variant="dark" for neutral buttons and icon-variant="light" for filled buttons.

Before After Save
<dr-button variant="btn-default" icon-position="before" icon-variant="dark"><span slot="icon">svg_goes_here</span>Before</dr-button>

<dr-button variant="btn-default" icon-position="after" icon-variant="dark"><span slot="icon">svg_goes_here</span>After</dr-button>

<dr-button variant="btn-primary" icon-position="before" icon-variant="light"><span slot="icon">svg_goes_here</span>Save</dr-button>

<dr-button variant="btn-default" tooltip="Close"><span slot="icon">svg_goes_here</span></dr-button>

Tooltips

Tooltips are controlled by the tooltip attribute and work across all current variants.

Top Right Bottom Left HTML Tooltip
<dr-button variant="btn-default" tooltip="Edit"><span slot="icon">svg_goes_here</span></dr-button>

<dr-button variant="btn-default-no-border" tooltip="Close"><span slot="icon">svg_goes_here</span></dr-button>

<dr-button variant="btn-primary" tooltip="Save changes" icon-variant="light"><span slot="icon">svg_goes_here</span></dr-button>

<dr-button variant="btn-success" tooltip="Approve" icon-variant="light"><span slot="icon">svg_goes_here</span></dr-button>

<dr-button variant="btn-default" tooltip="Right" tooltip-position="right">Right</dr-button>

Disabled State

Add the boolean disabled attribute to any button variant.

Default No Border Primary Danger Success
<dr-button variant="btn-default" disabled>Default</dr-button>

<dr-button variant="btn-default-no-border" disabled>No Border</dr-button>

<dr-button variant="btn-primary" disabled>Primary</dr-button>

<dr-button variant="btn-danger" disabled>Danger</dr-button>

<dr-button variant="btn-success" disabled>Success</dr-button>

Click Event

Attach a click listener to the component instance just like a normal button element, or use an inline onclick attribute.

Click Me Inline Click
<dr-button id="button-click-example" variant="btn-primary">Click Me</dr-button>

<dr-button variant="btn-default" onclick="alert('Button clicked')">Inline Click</dr-button>

// Native JavaScript
<script>
document.getElementById('button-click-example').addEventListener('click', function () {
  alert('Button clicked');
});
</script>

// jQuery
<script>
$('#button-click-example').on('click', function () {
  alert('Button clicked');
});
</script>

ID and Class Usage

Use id and class on <dr-button> mainly for JavaScript selectors, event hooks, and host-level layout classes.

Do not rely on them to style the inner native button UI inside the shadow DOM. Use variant for the built-in button styles.

Save
<dr-button id="save-button-hook" class="js-save-button" variant="btn-default">Save</dr-button>

// Native JavaScript
document.getElementById('save-button-hook').addEventListener('click', function () {
  alert('Save clicked');
});

// jQuery
document.querySelector('.js-save-button').addEventListener('click', function () {
  alert('Save clicked');
});