# nord-button > Buttons are used for interface actions. Primary style should be > used only once per section for main call-to-action, while other > styles can appear more frequently. ## Usage This section includes guidelines for designers and developers about the usage of this component in different contexts. > **Do:** - Only use one primary button per section, as a main call-to-action. - Use clear and accurate labels. - Use established button colors appropriately. For example, only use a danger button style for an action that’s difficult or impossible to undo. - Prioritize the most important actions. Too many buttons will cause confusion. - Be consistent with positioning of buttons in the user interface. - Use strong, actionable verbs in labels such as “Add”, “Close”, “Cancel”, or “Save”. > **Don't:** - Don't use a primary button in every row of a table. - Don’t use buttons to link to other pages. Use regular link or a plain style instead where necessary. - Don’t use buttons for navigation where the link appears within or following a sentence. - Don’t use labels such as “Read more”, “Click here” or “More”. --- ## Content guidelines Button labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button: > **Do:** View user settings > **Don't:** Click here When writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun): > **Do:** My tasks > **Don't:** My Tasks Avoid unnecessary words and articles in button labels, such as “the”, “an” or “a”: > **Do:** Add item > **Don't:** Add an item --- ## Variants This section describes the different component variants, their purpose, and when to use each variant. | Name | Purpose | | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `default` | Default style is the most common button variant. Only switch to another variant if you need to adjust the visual weight of the element. | | `primary` | Primary style is reserved for main call-to-actions. Should be used only once per content area or panel, e.g. for a “Save” action. | | `dashed` | Dashed style should be used for actions that trigger filtering. | | `danger` | Danger style should be used for actions that delete data or otherwise make it hard to undo the action. | | `plain` | Used for less important or less common actions. Can be also used for linking to other pages. | | `disabled` | Used for actions that aren’t currently available or not available anymore. Also prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies. | --- ## Icon usage in button Illustrative icons should be always positioned in the `start` slot: ![Button with icon in start slot](/img/components/button/start-slot.png){className="[\"n-border\",\"n-border-radius\",\"n-brand-therapy\"]" style="max-inline-size:700px;" loading="lazy" height="475" width="800"}![Button with icon in start slot](/img/components/button/start-slot-vet.png){className="[\"n-border\",\"n-border-radius\",\"n-brand-veterinary\"]" style="max-inline-size:700px;" loading="lazy" height="475" width="800"}When a button is used as a dropdown toggle, the `interface-dropdown-small` icon from [Nordicons](/nordicons/) is automatically placed in the `end` slot (you can use the `hideDropdownIcon` property to hide it): ![Dropdown button](/img/components/button/dropdown.png){className="[\"n-border\",\"n-border-radius\"]" style="max-inline-size:700px;" loading="lazy" height="475" width="800"}Each button size has a recommended icon size. The medium button uses the `s` icon size, the [small button](/components/button/?example=small+buttons) uses the `xs` icon size, and the [large button](/components/button/?example=large+buttons) uses the `m` icon size. The icon will adjust size automatically based on the button size, so you will get the correct behavior by default. However, this can be overridden by explicitly setting a size on the icon. ![Button icon sizes](/img/components/button/icon-sizes.png){className="[\"n-border\",\"n-border-radius\",\"n-brand-therapy\"]" style="max-inline-size:700px;" loading="lazy" height="475" width="800"}![Button icon sizes](/img/components/button/icon-sizes-vet.png){className="[\"n-border\",\"n-border-radius\",\"n-brand-veterinary\"]" style="max-inline-size:700px;" loading="lazy" height="475" width="800"}Use `interface-add-small` icon in the `start` slot for create/add type primary actions in the [header](/components/header/): ![Create/add type primary action with icon](/img/components/button/create.png){className="[\"n-border\",\"n-border-radius\",\"n-brand-therapy\"]" style="max-inline-size:700px;" loading="lazy" height="475" width="800"}![Create/add type primary action with icon](/img/components/button/create-vet.png){className="[\"n-border\",\"n-border-radius\",\"n-brand-veterinary\"]" style="max-inline-size:700px;" loading="lazy" height="475" width="800"}--- ## Additional considerations - Users of assistive technology expect a button to submit data or do an action. If you need the button to navigate into another view, use the `href` property which will output `` tag instead of a `